Tuesday, February 21, 2012

Google Maps V3 With Multiple Markers and Multiple InfoWindows

For anyone looking for the simple answer to creating a Google Maps Version 3 API map with multiple markers and multiple info windows, here is my simple and dependable solution:


        var locationsToMap = [
            [39.638547, -85.952911, "Southeast Corner"],
            [39.914990, -85.957193, "Northeast Corner"],
            [39.922966, -86.325456, "Northwest Corner"],
            [39.633365, -86.325456, "Southwest Corner"]
        ];

        function addGeoLocationsToMap() {
            var myOptions = {
                center: new google.maps.LatLng(getLatOfMapCenter(), getLongOfMapCenter()),
                zoom: getMapZoomLevel(),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            // "map_canvas" is the div container for the map
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var inforwindow = null;

            for (var i = 0; i < locationsToMap.length; i++) {
                //listingLatitude[x] and listinglongitude[x] are arrays holding the latitude and longitude for the marker
                if ((locationsToMap[i][0] != 0) && (locationsToMap[i][1] != 0)) {
                    //we are using an "eval(); expression to dynamically write new javascript in each loop
                    eval("var marker" + i + " = new google.maps.Marker({position: new google.maps.LatLng(" + locationsToMap[i][0] + ", " + locationsToMap[i][1] + "),map: map});");
                    //locationsToMap[x] is an array holding the html for the infowindows
                    eval("google.maps.event.addListener(marker" + i + ", 'click', function() {infowindow = new google.maps.InfoWindow({content: locationsToMap[" + i + "][2] + '
'});infowindow.open(map,marker" + i + ");} );");
                }
            }
        }

        function getLatOfMapCenter() {
            return 39.773595;
        }

        function getLongOfMapCenter() {
            return -86.150399;
        }

        function getMapZoomLevel() {
            return 10;
        }