How to display multiple Latitude and Longitude on Google Map

Question

I have multiple LAT/LONG in an array in PHP, but a code available to display lat/long is to display single lat/long, I tried to iterate the array in for loop, but it didn't work shown Below:

<html>
    <head>
        <style type="text/css">
            div#map {
                position: relative;
            }

            div#crosshair {
                position: absolute;
                top: 192px;
                height: 19px;
                width: 19px;
                left: 50%;
                margin-left: -8px;
                display: block;
                background: url(crosshair.gif);
                background-position: center center;
                background-repeat: no-repeat;
            }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var map;
            var geocoder;
            var centerChangedLast;
            var reverseGeocodedLast;
            var currentReverseGeocodeResponse;

            function initialize() {
                <?php for($i=0;$i<count($data);$i++){?>
                var latlng = new google.maps.LatLng(<?php echo $data[$i]['lat'].','.$data[$i]['long']; ?>);
                var myOptions = {
                    zoom: 40,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                geocoder = new google.maps.Geocoder();

                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "<?php echo $data[$i]['deviceID'];?>"
                });
                <?php }?>
            }

        </script>
    </head>
    <body onLoad="initialize()">
        <div id="map" style="width:200px; height:200px">
            <div id="map_canvas" style="width:100%; height:200px"></div>
            <div id="crosshair"></div>
        </div>


    </body>
</html>

I suspect there must be some parameter multiple in javasctipt code to make this work, but not sure about... Could some one help on this.

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Aug 15 '13 at 17:54
Probably would be more helpful to post the HTML that is seen by the browser. Will help you understand what is going on as well. — geocodezip, Aug 15 '13 at 17:55

score 1 · Answer 1 · answered Aug 15 '13 at 17:57

You are creating new map in every iteration. Place map definition and geocoder definition outside foreach:

function initialize() {
    var myOptions = {
        zoom: 40,
        center: latlng,   // set some default latlng here, e.g $data[0]['lat'], $data[0]['lng']
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    <?php for($i=0;$i<count($data);$i++){?>
    var latlng = new google.maps.LatLng(<?php echo $data[$i]['lat'].','.$data[$i]['long']; ?>);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "<?php echo $data[$i]['deviceID'];?>"
    });
    <?php }?>
}

How to display multiple Latitude and Longitude on Google Map

1 Answers1