Home/ Questions/Q 8593549
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T00:01:03+00:00

I am using this code to get the google maps. <style type=text/css> html {

  • 0

I am using this code to get the google maps.

    <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
  var latlng = new google.maps.LatLng(52.000,17.1100);
    var myOptions = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
    });

  var infoWindow = new google.maps.InfoWindow({
    position: latlng,
    content: '<b>Theater Address:</b><br> <?php echo $row['address']; ?>'
  });
  infoWindow.open(map);
  }
</script>

And i am using this html form code to enter the lat and lon, and i have one submit button.

<form  method="post" autocomplete="off">
        <p>
            <b>lat</b> <label>:</label>
            <input type="text" name="lat" id="lat" />
            <b>lon</b> <label>:</label>
            <input type="text" name="lon" id="lon" />
        </p>
        <input type="submit" value="Show location" />
    </form>

the map has some other lat and lon .but i should also change its lat and lon when i click submit after typing lat and lon.how can i do this can anyone help me?

Thanks in advance.. 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve put some vars out of the initialize function to make them available for the button click. I added an id to your submit button and included jquery. This works for me:

    <!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #map_canvas { height: 400px; width: 500px }
    </style>
  </head>
  <body>
    <div id="map_canvas"></div>
    <form  method="post" autocomplete="off">
      <p>
        <b>lat</b> <label>:</label>
        <input type="text" name="lat" id="lat" />
        <b>lon</b> <label>:</label>
        <input type="text" name="lon" id="lon" />
      </p>
      <input type="submit" value="Show location" id="submit"/>
    </form>
    <script src="jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
     <script type="text/javascript">
       var latlng = new google.maps.LatLng(52.000,17.1100);
       var myOptions = {
         zoom: 12,
         center: latlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       function initialize() {
         var marker = new google.maps.Marker({
           position: latlng,
           map: map,
         });

         var infoWindow = new google.maps.InfoWindow({
           position: latlng,
           content: '<b>Theater Address:</b>'
         });
        infoWindow.open(map);
      }

      initialize();

      $("#submit").on("click", function(evt) {
        evt.preventDefault();
        var lat = $("input#lat").val();
        var lon = $("input#lon").val();
        latlng = new google.maps.LatLng(lat,lon)
        map.setCenter(latlng)
  })
  </script>
</body>

    • 0