JavaScript: visualizzare località multiple con le Google Maps API

Solitamente usiamo le Google Maps per mostrare singole località, ma cosa accadrebbe se dovessimo mostrarne più d'una? Possiamo sfruttare le Google Maps API anche per questo scopo.

Abbiamo bisogno di un array di coordinate e di vari marker, ognuno per la località da visualizzare:

var markers = [
    ['Bondi Beach', -33.890542, 151.274856],
    ['Coogee Beach', -33.923036, 151.259052],
    ['Cronulla Beach', -34.028249, 151.157507],
    ['Manly Beach', -33.80010128657071, 151.28747820854187],
    ['Maroubra Beach', -33.950198, 151.259302]
];

function initializeMaps() {
    var myOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    var infowindow = new google.maps.InfoWindow(); 
    var marker, i;
    var bounds = new google.maps.LatLngBounds();

    for (i = 0; i < markers.length; i++) { 
        var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(pos);
        marker = new google.maps.Marker({
            position: pos,
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
    map.fitBounds(bounds);
}

initializeMaps();                                      

Ciascun marker è stato creato utilizzando i valori delle coordinate memorizzati nell'array. A ciascun marker è stato associato un evento click che mostrerà il nome della località in un oggetto InfoWindow. Ciascun nome viene sempre estratto dall'array iniziale.