google maps api multiple markers info window only showing last element

javascript google-maps-api-3 google-maps-markers infowindow

12,006

You may try this

function initialize() {
    var myOptions = {
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var all = [
        ["Location 1", "Summerdale Rd", "Elon", "NC",
        "27253", "36.150491", "-79.5470544"],
        ["Location 2", "7205 Olmstead Dr", "Burlington", "NC",
        "27215", "36.069974", "-79.548101"],
        ["Location 3", "W Market St", "Graham", "NC",
        "27253", "36.0722225", "-79.4016207"],
        ["Location 4", "Mt Hermon Rock Creek Rd", "Graham", "NC",
        "27253", "35.9826328", "-79.4165216"],
        ["Location 5", "415 Spring Garden St", "Greensboro", "NC",
        "27401", "36.06761", "-79.794984"]
    ];
    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    var infowindow = new google.maps.InfoWindow();
    for (var i = 0; i < all.length; i++) {
        var name = all[i][0], address = all[i][1], city = all[i][2],
        state = all[i][3], zip = all[i][4], lat = all[i][5], lng = all[i][6], 
        latlngset = new google.maps.LatLng(lat, lng);
        var content = '<div class="map-content"><h3>' + name + '</h3>' + address + '<br />' + city + ', ' + state + ' ' + zip + '<br /><a href="http://maps.google.com/?daddr=' + address + ' ' + city + ', ' + state + ' ' + zip + '" target="_blank">Get Directions</a></div>';
        var marker = new google.maps.Marker({
            map: map,
            title: city,
            position: latlngset
        });
        google.maps.event.addListener(marker, 'click', (function(marker, content) {
            return function() {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
        })(marker, content));
    }

}
google.maps.event.addDomListener(window, 'load', initialize);

12,006

Author by

Admin

Updated on June 05, 2022

Comments

Admin almost 2 years

Possible Duplicate:
Google Maps API Multiple Markers with Infowindows

I am creating a Google Maps for a school project. Being a JavaScript newb, I got the code from a tutorial I found online. My problem is that I have an array of markers and multiple info windows, but whenever you click on a marker (doesn't matter which one), the info window only shows the content in the last element. Now I know this problem has been mentioned many times, unfortunately, I was unable to take the solutions mentioned in the other posts and apply it to my work.

here a is a link to the map: link to google maps

please let me know how to fix my problem. thanks.

<html>
<head>
 <style>
    body { font-family: Helvetica; }
    .map-content h3 { margin: 0; padding: 5px 0 0 0; }
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"/> 
 <script>
    // Set the Map variable
    var map;

    function initialize() {
        var myOptions = {
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var all = [
            ["Location 1", "Summerdale Rd", "Elon", "NC",
            "27253", "36.150491", "-79.5470544"],
            ["Location 2", "7205 Olmstead Dr", "Burlington", "NC",
            "27215", "36.069974", "-79.548101"],
            ["Location 3", "W Market St", "Graham", "NC",
            "27253", "36.0722225", "-79.4016207"],
            ["Location 4", "Mt Hermon Rock Creek Rd", "Graham", "NC",
            "27253", "35.9826328", "-79.4165216"],
            ["Location 5", "415 Spring Garden St", "Greensboro", "NC",
            "27401", "36.06761", "-79.794984"]
            ];

        var infoWindow = new google.maps.InfoWindow;
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

        // Set the center of the map
        var pos = new google.maps.LatLng(36.0621881, -79.5101063);
        map.setCenter(pos);

        function infoCallback(infowindow, marker) {
            return function() {
                infowindow.open(map, marker);
            };
        }

        function setMarkers(map, all) {
            for (var i in all) {
                var name = all[i][0];
                var address = all[i][1];
                var city = all[i][2];
                var state = all[i][3];
                var zip = all[i][4];
                var lat = all[i][5];
                var lng = all[i][6];
                var latlngset;
                latlngset = new google.maps.LatLng(lat, lng);

    /*var marker = new google.maps.Marker({  
    map: map,  title: city,  position: latlngset  
    });*/

                var content = '<div class="map-content"><h3>' + name + '</h3>' + address + '<br />' + city + ', ' + state + ' ' + zip + '<br /><a href="http://maps.google.com/?daddr=' + address + ' ' + city + ', ' + state + ' ' + zip + '" target="_blank">Get Directions</a></div>';

    /*var infowindow = new google.maps.InfoWindow();
    for(var i=0; i<all.length; i++)
    {
    infowindow.setContent(content);
    google.maps.event.addListener(
    marker, 
    'click', 
    infoCallback(infowindow, marker)
    );

    }*/

                var infowindow = new google.maps.InfoWindow();

                for (var i = 0; i < all.length; i++) {
                    var marker = new google.maps.Marker({
                        map: map,
                        title: city,
                        position: latlngset
                    });

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(content);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }
            }
        }

        // Set all markers in the all variable
        setMarkers(map, all);
    };

    // Initializes the Google Map
    google.maps.event.addDomListener(window, 'load', initialize);
 </script>
 </head>

 <body>
    <div id="map_canvas" style="height: 100%; width: 100%;"></div>
 </body>
</html>