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 stackoverflow.com/questions/3808808/… to select a class cross-browser. — Blazemonger
– Blazemonger, Commented Nov 13, 2013 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 instead. — Andy
– Andy, Commented Nov 13, 2013 at 16:42
@Andy, the maps are being used in a responsive layout. with the user given the ability to pan around. — Ray
– Ray, Commented Nov 13, 2013 at 16:44
possible duplicate of Google Maps won't work when using classes to select multiple canvases — geocodezip
– geocodezip, Commented Nov 13, 2013 at 16:47

beeglebug · Accepted Answer · 2013-11-13 16:47:58Z

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.

alex · Accepted Answer · 2013-11-13 17:28:41Z

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");

Collectives™ on Stack Overflow

Multiple Google Maps on a single Page?

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related