map.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Find Your Store Here</title>


<style>
.map{
  /* display: grid;
  grid-template-columns: 1fr 1fr; */
  margin-top: 50px;
}
.type{
  text-align: center;
  color: rgb(106, 37, 78);
margin-top: 5rem;
}
.type input{
  margin-top: 1rem;
  min-height: 1.5rem;
  padding-left: 1rem;
}
#redc{
  
  text-decoration: underline;
}
#ms{
  padding: 8px 28px;
  background-color:#003380;
  color: white;
  font-weight: 700;
  font-size: 20px;
  border: 0px solid white;
  border-radius: 3px;
  margin-left: 1rem;
}
#ms:hover{
  background-color: #003380;
}
#mapmargin{
  margin-top: 50px;
}
</style>


</head>


<body>
    
    <div class="map">
        <div class="type">
           <h2>Explore <span id="redc">NEXT TECHNOLOGIES</span> Near Your Place</h2>
           <input type="text" placeholder="Enter City Name Here" name="" id="cityname" />
       <button id="ms">Search</button>
    </div>
   <div id="mapmargin">
       <iframe width="100%" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://putlocker-is.org"></a>
   </div>
</div>


</body>

<script>
    var city;
 

 // annomius Function by button pressing
 
 document.querySelector("#ms").addEventListener("click", function () {
   local = document.querySelector("#cityname").value;
 
       // map url of particular city
       let map = document.querySelector("#gmap_canvas");
       map.src =
         "https://maps.google.com/maps?q=Dell " +
         local +
         "&t=&z=13&ie=UTF8&iwloc=&output=embed";
     });
 
 
</script>
</html>