Adding two or more google maps on one page

Question

I am trying to show several google maps on my page, I have tried to change function name but with no luck, does anybody knows where must I change a name of varibles. Becuase I have tried to change the initialize function to initialize2 but I think I have to change this name in more places, as I have several addresses

Here is my code so far

 $(document).ready(function () { /* google maps */ google.maps.visualRefresh = true; var map; function initialize() { var geocoder = new google.maps.Geocoder(); var address = $('#map-eindhoven').text(); /* change the map-input to your address */ var mapOptions = { zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas-eindhoven'), mapOptions); if (geocoder) { geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { map.setCenter(results[0].geometry.location); var infowindow = new google.maps.InfoWindow( { content: address, map: map, position: results[0].geometry.location, }); var marker = new google.maps.Marker({ position: results[0].geometry.location, map: map, title: address }); } else { alert("No results found"); } } }); } } google.maps.event.addDomListener(window, 'load', initialize); var map; function initialize2() { var geocoder = new google.maps.Geocoder(); var address = $('#map-rotterdam').text(); /* change the map-input to your address */ var mapOptions = { zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas-rotterdam'), mapOptions); if (geocoder) { geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { map.setCenter(results[0].geometry.location); var infowindow = new google.maps.InfoWindow( { content: address, map: map, position: results[0].geometry.location, }); var marker = new google.maps.Marker({ position: results[0].geometry.location, map: map, title: address }); } else { alert("No results found"); } } }); } } google.maps.event.addDomListener(window, 'load', initialize2); });

Pete · Accepted Answer · 2014-05-30 08:15:04Z

Try replacing your second initialize with this:

 var map2; function initialize2() { var geocoder = new google.maps.Geocoder(); var address = $('#map-rotterdam').text(); /* change the map-input to your address */ var mapOptions = { zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; map2 = new google.maps.Map(document.getElementById('map-canvas-rotterdam'), mapOptions); if (geocoder) { geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { map2.setCenter(results[0].geometry.location); var infowindow = new google.maps.InfoWindow({ content: address, map: map2, position: results[0].geometry.location, }); var marker = new google.maps.Marker({ position: results[0].geometry.location, map: map2, title: address }); } else { alert("No results found"); } } }); } } google.maps.event.addDomListener(window, 'load', initialize2);

Example

No that does not owrk, on first element i got marker, and o second i got map :(
Sorry, I forgot to setCenter on map2, updated answer - try again

Dmitry Volokh · Accepted Answer · 2014-05-30 07:48:46Z

map = new google.maps.Map(document.getElementById('map-canvas-eindhoven'), mapOptions); map = new google.maps.Map(document.getElementById('map-canvas-rotterdam'), mapOptions);

map variable goes to the ready function's scope and is rewritten after the second map initialization.

You should add var statement before creating instance, not before function. Read this for more information. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

HoangHieu · Accepted Answer · 2014-05-30 13:41:15Z

google.map.Map() is a object <=> you save array object to validate map. and 1 item to focus 1 tag map in your website

var map = new Array(); map[1] = new google.maps.Map(document.getElementById('map-a'), mapOptions); map[2] = new google.maps.Map(document.getElementById('map-b'), mapOptions);

google.map.Map() is a object <=> you save array object to validate map. and 1 item to focus 1 tag map in your website.

Collectives™ on Stack Overflow

Adding two or more google maps on one page

3 Answers 3

3 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Related