Home/ Questions/Q 9152499
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T12:03:47+00:00

See below sample of simple google map set to Lat and Long. This code

  • 0

See below sample of simple google map set to Lat and Long.
This code would work for the purpose, but need php echo of City, State chosen by user to display in lieu of Lat Long. Can anyone outline the code to make this execute?
Want to be compatible with Google Maps API v3. Greatly appreciate.

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"

      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>

    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>

  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

In past, i’ve used the following code to display City, State:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=BQIAAAAmGS6pKWpRUcdw4oR9pzpvBQzjcAJnzRmzqULnEw6fdi4mPoYnxR1kxeM4lTW9o75OG9vfiUP8DKkig" type="text/javascript"></script>    
    <script type="text/javascript">
    var map = null;
    var geocoder = null;
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setMapType(G_HYBRID_MAP);
        disableDefaultUI: true;
        map.enableScrollWheelZoom();
        geocoder = new GClientGeocoder();
      }
        showAddress("<?php echo $_SESSION['city_name']; ?>");
    }
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
            //alert(address + " not found");
            } else {
            map.setCenter(point, 13);
            map.setZoom(13);
            }
          }
        );
      }
    }
</script>

</head>

<body onload="initialize()" onunload="GUnload()">
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Code was copied from geocode-with-google-maps-api-v3 and reorganized so it should look like your old code.

    <html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&sensor=false"></script>
    <script type="text/javascript">
        var geocoder;
        var map;
        var marker;

        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            geocoder = new google.maps.Geocoder();
            marker = new google.maps.Marker({
                map: map,
                draggable: true
            });

            showAddress('Ljubljana');
        }

        function showAddress(address) {
            geocoder.geocode({'address': address}, function(results, status) {
                if (status != google.maps.GeocoderStatus.OK) {
                    return;
                }
                if (results.length > 1) {
                    alert('Multiple addresses found; showing first one ...');
                }
                $.each(results, function(i, item) {
                    var location = new google.maps.LatLng(item.geometry.location.lat(), item.geometry.location.lng());
                    marker.setPosition(location);
                    map.setCenter(location);
                    return false;
                });
            });
        }
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
    • 0