Good google maps api v3 tutorial?

[sarahfrantz]

I’m struggling to find a way to put multiple google maps, on the same page, each with different sets of markers. I’m wondering if anyone can recommend a tutorial that might help guide me on this?

[fretburner]

Hi Sarah,

I don’t know of any tutorials that cover this, but I’ve taken an example from the Google Maps docs and adapted it to display multiple maps. To create additional maps, just add another div element and corresponding config object to the maps array.

HTML

<div id="map1" class="map-canvas"></div>
<div id="map2" class="map-canvas"></div>

JS

var maps = [
    {
        elementId: 'map1',
        title: 'Map 1',
        mapOptions: {
            zoom: 4,
            center: new google.maps.LatLng(-25.363882, 131.044922)
        },
        points: [
            new google.maps.LatLng(-25.363882, 131.044922)
        ]
    },
    {
        elementId: 'map2',
        title: 'Map 2',
        mapOptions: {
            zoom: 4,
            center: new google.maps.LatLng(-25.363882, 131.044922)
        },
        points: [
            new google.maps.LatLng(-25.363882, 131.044922),
            new google.maps.LatLng(-23.822076, 141.263202)
        ]
    }
];

function initialize() {
    maps.forEach(function(mapConfig){
        mapConfig.map = new google.maps.Map(document.getElementById(mapConfig.elementId), mapConfig.mapOptions);
        mapConfig.points.forEach(function(point){
            new google.maps.Marker({
                position: point,
                map: mapConfig.map,
                title: mapConfig.title
            });
        });
    });
}

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

I’ve also put the code in a JSFiddle.