Home/ Questions/Q 9138937
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T09:19:19+00:00

The code below will display the city, state chosen by user from previous page

  • 0

The code below will display the city, state chosen by user from previous page of website. However, map first loads LatLong location, then opens city, state. How can the LatLong variable be eliminated so it does not load? Just want city, state to display. 

<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('"<?php echo $_SESSION['city_name']; ?>"');
        }

        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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You know you could always find the lat-long for the specific city you are looking for and zoom to the right level to fit the area into view. That’s how I used it.

    Or you could use the geocoder result to send value to latlang
    So you will need to call geocoder.geocode() before you initialize the map

    Use the line already in your code: 

    var location = new google.maps.LatLng(item.geometry.location.lat(), item.geometry.location.lng());

    and then place this after: 

    var latlng = location;

    Then use the latlng to initialize the map
    So you code should look like this:

    <script type="text/javascript">
    var geocoder;
    var map;
    var marker;

    function initialize() {

        /*Go through the following to understand what I'm trying to get at.*/
        var address = "<?php echo $_SESSION['city_name']; ?>";
        geocoder = new google.maps.Geocoder(); // This was removed from below. Compare with your code.
        geocoder.geocode( { 'address': address}, function(results, status) {

            if (status == google.maps.GeocoderStatus.OK) {
            var latlang = results[0].geometry.location; } 

            else { alert("The location cannot be mapped"); }
        });

        /* Up until here. */

        var mapOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        marker = new google.maps.Marker({
            map: map,
            draggable: true
        });

        showAddress('"<?php echo $_SESSION['city_name']; ?>"');
    }

    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>

    This should work.

    • 0