How to define multiple locations Using Google Maps

Question

This question might be answered in other posts, but I haven't found the specific answer and I'm having trouble discerning how to logically think through this. I have a site where each post has an address. On each post page I've used the Google Maps API to translate the address into a map location and to show a map with a pin at that address. Works great.

What I need to do now is to show a map at the top of my archive/category/etc pages (pages with a list of posts generated by a query and a loop) and to list a pin for every post that shows up in that particular query. I also need the map to automatically resize to show all of the pins, and not show extraneous map outside of the pins boundaries.

The way it seems that this would happen is that I could create the markers with a script that's inside the loop, so that each time the loop runs, it would generate a new marker and add it to the map.

Another possible method that seems like it has potential would be to add the location to an array for each turn of the loop, and then show the array of pins when the loop is done.

Can anyone give me some advice on how to accomplish this? At this point I'm using the following code which gives me a map and the location of the last post in the list generated by the loop. This code is outside of the loop. I need to know which part I should move inside the loop, and how to adjust it so that I won't simply rewrite the marker during every iteration of the loop.

<script type="text/javascript">
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var mapOptions = {
            zoom: 3,
        }
        var myAddress = document.getElementById('theAddress');
        var address = myAddress.textContent;
        geocoder.geocode({
            'address': address
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,

                });


            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });

        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

You need to add markers in a loop. this was taken from a project i was working.

var locations = ["Denver, CO, United States"];
var markers = [];
var iterator = 0;

for (var i = 0; i < locations.length; i++) {
    setTimeout(function() {
            geocoder.geocode({'address': locations[iterator]}, function(results, status){
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                animation: google.maps.Animation.DROP
            });
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
        } else {
            log('Geocode was not successful for the following reason: ' + status);
        }
    });
    iterator++;

    }, i * 250);
}