Multiple Google Maps on a single Page?

Question

Im trying to display multiple Google Maps on a single page. It is a results page that is dynamically generated per locations in the area. Each div has a map class that I want to run the Google Map off of. As of right now I can only get it to process the information for one div.

I understand that I need to somehow pass Google Maps an array. But I am confused as to how to do this given the uses for my implementation.

HTML

<div class="map" data-address="123 easy st city st zip" data-title="location"></div>
<div class="map" data-address="456 easy st city st zip" data-title="location 2"></div>

jQuery

$('.map').each(function() {

    var geoCode = new google.maps.Geocoder(), 
    container = this;

    geoCode.geocode({'address': $(container).data('address')}, function(results, status) {
    var start_options = 0;

    if (status == google.maps.GeocoderStatus.OK) {
         var mapOptions = {
             zoom: 14,
             center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
             zoomControl: true,
             scaleControl: false,
             scrollwheel: false,
             disableDefaultUI: true,
             mapTypeId: google.maps.MapTypeId.ROADMAP,

         }

         if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android|Blackberry|Windows Phone|Nokia|HTC|webOS)/)) {
                 mapOptions.draggable=false;
        }

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

        var marker = new google.maps.Marker({
            position: results[0].geometry.location,
            animation: google.maps.Animation.DROP,
            map: map,
            title: $(this).data('itemTitle')
        });

        google.maps.event.addListener(marker, 'click', toggleBounce);

        function toggleBounce() {
              if (marker.getAnimation() != null) {
                marker.setAnimation(null);
              } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
              }
        }

        var center;
        function calculateCenter() {
            center = map.getCenter();
        }

        google.maps.event.addDomListener(map, 'idle', function() {
            calculateCenter();
        });

        google.maps.event.addDomListener(window, 'resize', function() {
            map.setCenter(center);
        });
    } else {
        $(this).parent().hide();
    }
});
});

`document.getElementById("map")` is incorrect since `map` is a class. See http://stackoverflow.com/questions/3808808/how-to-get-element-by-class-in-javascript to select a class cross-browser. — Blazemonger, Nov 13 '13 at 16:35
Does the user need to pan around these maps? If not you might be better off using a bunch of [static maps](https://developers.google.com/maps/documentation/staticmaps/) instead. — Andy, Nov 13 '13 at 16:42
@Andy, the maps are being used in a responsive layout. with the user given the ability to pan around. — Ray, Nov 13 '13 at 16:44
possible duplicate of [Google Maps won't work when using classes to select multiple canvases](http://stackoverflow.com/questions/18192260/google-maps-wont-work-when-using-classes-to-select-multiple-canvases) — geocodezip, Nov 13 '13 at 16:47

beeglebug · Accepted Answer · 2013-11-13T16:47:58.197

Inside your forEach loop you are using document.getElementById("map").

This is wrong for a couple of reasons, firstly because the map doesnt have an id, it has a class, and secondly because the map will be attached to the same element each time.

What you want to do is attach the map to the current map in the loop. In your jQuery loop this will be the this variable.

Conveniently (as this can often change inside nested functions), the first line of your loop stores this in a variable called container.

So simply replace document.getElementById("map") with container, and you should get a different map attached to each instance of the .map element.

I've updated the answer, hopefully it's clearer now. – beeglebug Nov 13 '13 at 16:50 — beeglebug, Nov 13 '13 at 16:50

alex · Answer 2 · 2013-11-13T17:28:41.787

assign id attributes to your divs
wrap google map code in a function with one parameter >the container
call the function

function getGoogleMap(container) 
{
    //google code 
    //use the container parameter like so

    geoCode.geocode({'address': $("#" + container).data('address')});
    //or so
    var map = new google.maps.Map(document.getElementById(container), mapOptions);
}
getGoogleMap("map1");

Multiple Google Maps on a single Page?

2 Answers2