How do I get more than one map on a single page?

Question

I am going to need at least 3 maps on the same page (one below the other, not side by side), each containing multiple markers. Can anyone tell me how to get three versions of this on the same page (after which I can amend the details for each one)? I'm basically feeling my way here, not knowing much about javascript.

Many thanks in advance - Roger

<div id="map" style="height:400px;width:541px;display:block;">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function mapIt(){

    var latlng = new google.maps.LatLng(24.00, 0.00);
    var myOptions = {
        zoom: 1,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
    var map = new google.maps.Map(document.getElementById('map'), myOptions);
    setMarkers(map, places);
}

var places = [
        ['London',51.50, -0.125,"Markers/green.png"],
        ['Abidjan',5.34, -4.03,"Markers/red2.png"],
        ['Abu Dhabi',24.47, 54.37,"Markers/red2.png"],

];

var popUps = [
        '<strong>London</strong><br />link to larger map',
        '<strong>Abidjan, Ivory Coast</strong><br />Content here',
        '<strong>Abu Dhabi, United Arab Emirates</strong><br />Content here>',


    ]


var infowindow;
function setMarkers(map, locations) {

     for (var i = 0; i < places.length; i++) {
        var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
        var icon = locations[i][3];
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,  
            title: locations[i][0],
            icon: icon
        });
        (function(i, marker) {
            google.maps.event.addListener(marker,'click',function() {
                if (!infowindow) {
                    infowindow = new google.maps.InfoWindow();
                }
                infowindow.setContent(popUps[i]);
            infowindow.open(map, marker);
            });
        })(i, marker);
     }
};
mapIt();
</script></div>

Div id="map" var map =.... Make another div and another variable with a different name. — Rick Calder, Mar 14 '13 at 17:24
Thanks. I can see that would work in theory but can't make it work with this. Not enough Javascript knowledge. — Roger Golding, Mar 15 '13 at 11:48

Mauno Vähä · Answer 1 · 2013-03-14T17:46:26.193

I few minutes ago created code which shows how to set four maps in the same page.

See it from JS Fiddle

It basically just boils down to setting correct number of div elements for maps:

<div id="map0"></div>
<div id="map1"></div>
<div id="map2"></div>
<div id="map3"></div>

and initializing them:

var map0 = new google.maps.Map(document.getElementById("map0"), mapOptions);
var map1 = new google.maps.Map(document.getElementById("map1"), mapOptions);
var map2 = new google.maps.Map(document.getElementById("map2"), mapOptions);
var map3 = new google.maps.Map(document.getElementById("map3"), mapOptions);

Edit:

I updated example to add markers to following kind of object so they are easier to be accessed based on what map markers you want to handle.

var markers = {
          'map0' : [],
          'map1' : [],
          'map2' : [],
          'map3' : [],
      };

It should print following debug information to javascript console:

Marker is: (60.12816100000001, 18.643501000000015) map name is: map0
(markers['map0'][0]: (60.12816100000001, 18.643501000000015)
Marker is: (61.92410999999999, 25.748151000000007) map name is: map1
(markers['map0'][0]: (60.12816100000001, 18.643501000000015)
Marker is: (32.7151137, -117.15665719999998) map name is: map2
(markers['map0'][0]: (60.12816100000001, 18.643501000000015)
Marker is: (35.86166, 104.19539699999996) map name is: map3
(markers['map0'][0]: (60.12816100000001, 18.643501000000015)

So in the example I provided I only add one marker per map, but add as many as you like since markers object has array for each map type.

Cheers.

How do I get more than one map on a single page?

1 Answers1