How to Display Multiple Google Maps per page with API V3

Question

I have the following script  And I want to make both maps appear on the page  but no matter what I try I can only get the first map initialize   to display    the second one doesn t  Any suggestions   also  I can t add it in the code  but the first map is being displayed in  lt div id  map canvas  gt  lt  div gt  lt div id  route  gt  lt  div gt  Thanks    lt script type  text javascript  gt      Create a directions object and register a map and DIV to hold the     resulting computed directions  var map  var directionsPanel  var directions   function initialize       map   new GMap document getElementById  map canvas       map setCenter new GLatLng 41 1255275 -73 6964801   15     directionsPanel   document getElementById  route      directions   new GDirections map  directionsPanel     directions load  from  Armonk Fire Department  Armonk NY to   lt  php echo  LastCallGoogleAddress   gt         map addControl new GSmallMapControl       map addControl new GMapTypeControl         lt  script gt      lt div id  map canvas2  style  width 200px  height 200px   gt  lt  div gt   lt div id  route2  gt  lt  div gt    lt script type  text javascript  gt      Create a directions object and register a map and DIV to hold the     resulting computed directions  var map2  var directionsPanel2  var directions2   function initialize2       map2   new GMap document getElementById  map canvas2       map2 setCenter new GLatLng 41 1255275 -73 6964801   15     directionsPanel2   document getElementById  route2      directions2   new GDirections map2  directionsPanel2     directions2 load  from  ADDRESS1 to  ADDRESS2        map2 addControl new GSmallMapControl       map2 addControl new GMapTypeControl         lt  script gt     lt script type  text javascript  gt  function loadmaps        initialize        initialize2         lt  script gt

User · Answer

I had one especific issue  i had a Single Page App and needed to show different maps  in diferent divs  one each time  I solved it in not a very beautiful way but a functionally way  Instead of hide the DOM elements with display property i used the visibility property to do it  With this approach Google Maps API had no trouble about know the dimensions of the divs where i had instantiated the maps

User · Answer

Here is how I have been able to generate multiple maps on the same page using Google Map API V3  Kindly note that this is an off the cuff code that addresses the issue above   The HTML bit   lt div id  map canvas  style  width 700px  height 500px  margin-left 80px   gt  lt  div gt   lt div id  map canvas2  style  width 700px  height 500px  margin-left 80px   gt  lt  div gt    Javascript for map initialization   lt script type  text javascript  gt  var map  map2   function initialize condition           create the maps     var myOptions             zoom  14          center  new google maps LatLng 0 0  0 0           mapTypeId  google maps MapTypeId ROADMAP           map   new google maps Map document getElementById  map canvas    myOptions        map2   new google maps Map document getElementById  map canvas2    myOptions      lt  script gt

User · Answer

Take a Look at this Bundle for Laravel that I Made Recently     https   github com Maghrooni googlemap it helps you to create one or multiple maps in your page     you can find the class on   src googlemap php   Pls Read the readme file first  and  don t forget to pass different ID  if you want to have multiple Maps in one page

User · Answer

You haven t defined a div with id  map canvas   you only have id  map canvas2  and id  route2    The div ids need to match the argument in the GMap   constructor

User · Answer

You could try nex approach css     map               height  300px              width  100               HTML   foreach var map in maps       lt div id  map- map Id  lat   map Latitude  lng   map Longitude  class  map  gt     lt  div gt      JavaScript    lt script gt      var maps           var markers           function initMap             var  maps       map              each  maps  function  i  value                var uluru     lat  parseFloat   value  attr  lat     lng  parseFloat   value  attr  lng                    var mapDivId     value  attr  id                 maps mapDivId    new google maps Map document getElementById mapDivId                     zoom  17                  center  uluru                              markers mapDivId    new google maps Marker                   position  uluru                  map  maps mapDivId                                    lt  script gt    lt script async defer         src  https   maps googleapis com maps api js language ru-Ru amp key YOUR KEY amp callback initMap  gt   lt  script gt

User · Answer

var maps qty  for  var i   1  i  lt   maps qty  i                      append container   append   lt div class  col-lg-10 grid container     i       gt       lt div id  googleMap   i     style  height 300px   gt  lt  div gt     lt  div gt             map   document getElementById  googleMap    i           initialize map i             Intialize Google Map with Polyline Feature in it   function initialize map i                map index   i-1          path lat long               var mapOptions                 zoom  2              center  new google maps LatLng 51 508742 -0 120850                      var polyOptions                 strokeColor    000000               strokeOpacity  1 0              strokeWeight  3                       Push element google map  in an array of google maps         map array push new google maps Map map  mapOptions              For Mapping polylines to MUltiple Google Maps         polyline array push new google maps Polyline polyOptions            polyline array map index  setMap map array map index              For Resizing Maps Multiple Maps   google maps event addListener map   idle   function               google maps event trigger map   resize             map setZoom  map getZoom   - 1    map setZoom  map getZoom     1

User · Answer

Here s another example if you have the long and lat  in my case using Umbraco Google Map Datatype package and outputting a list of divs with class  map  eg    lt div class  map  id  UK  gt 52 21454000000001 0 14044490000003407 13 lt  div gt    my JavaScript using Google Maps API v3 based on Cultiv Razor examples      map   each function  index  Element        var coords     Element  text   split           if  coords length    3              this  display    none           return            var latlng   new google maps LatLng parseFloat coords 0    parseFloat coords 1         var myOptions             zoom  parseFloat coords 2            center  latlng          mapTypeId  google maps MapTypeId ROADMAP          disableDefaultUI  false          mapTypeControl  true          zoomControl  true          zoomControlOptions                style  google maps ZoomControlStyle SMALL                      var map   new google maps Map Element  myOptions        var marker   new google maps Marker           position  latlng          map  map

User · Answer

Taken from These examples - guide   implementation     set your  lt div gt  s with the appropriate id include the Google Map options with foundation calling  include foundation and rem js lib     Example -   index html -   lt div class  row  gt      lt div class  large-6 medium-6   gt         lt div id  map canvas  class  google-maps  gt         lt  div gt      lt  div gt      lt br gt      lt div class  large-6 medium-6   gt         lt div id  map canvas 2  class  google-maps  gt  lt  div gt      lt  div gt   lt  div gt   lt script src   js foundation js  gt  lt  script gt   lt script src   js google maps options js  gt  lt  script gt   lt script src   js rem js  gt  lt  script gt   lt script gt     jQuery function           setTimeout initializeGoogleMap 700           lt  script gt    google maps options js -  function initializeGoogleMap           document  foundation        var latlng   new google maps LatLng 28 561287 -81 444465       var latlng2   new google maps LatLng 28 507561 -81 482359        var myOptions                 zoom  13          center  latlng          mapTypeId  google maps MapTypeId ROADMAP             var myOptions2                 zoom  13          center  latlng2          mapTypeId  google maps MapTypeId ROADMAP              var map   new google maps Map document getElementById  map canvas    myOptions        var map2   new google maps Map document getElementById  map canvas 2    myOptions2         var myMarker   new google maps Marker                position  latlng          map  map          title  Barnett Park              var myMarker2   new google maps Marker                position  latlng2          map  map2          title  Bill Fredrick Park at Turkey Lake

User · Answer

I have just finished adding Google Maps to my company s CMS offering   My code allows for more than one map in a page   Notes    I use jQuery I put the address in the content and then parse it out to dynamically generate the map I include a Marker and an InfoWindow in my map   HTML    lt div class  block maps first  gt       lt div class  content  gt           lt div class  map canvas  gt               lt div class  infotext  gt                   lt div class  location  gt Middle East Bakery  amp  Grocery lt  div gt                   lt div class  address  gt 327 5th St lt  div gt                   lt div class  city  gt West Palm Beach lt  div gt                   lt div class  state  gt FL lt  div gt                   lt div class  zip  gt 33401-3995 lt  div gt                   lt div class  country  gt USA lt  div gt                   lt div class  phone  gt  561  659-4050 lt  div gt                   lt div class  zoom  gt 14 lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt   lt div class  block maps last  gt       lt div class  content  gt           lt div class  map canvas  gt               lt div class  infotext  gt                   lt div class  location  gt Global Design  Inc lt  div gt                   lt div class  address  gt 3434 SW Ash Pl lt  div gt                   lt div class  city  gt Palm City lt  div gt                   lt div class  state  gt FL lt  div gt                   lt div class  zip  gt 34990 lt  div gt                   lt div class  country  gt USA lt  div gt                   lt div class  phone  gt  lt  div gt                   lt div class  zoom  gt 17 lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    Code     document  ready function          maps       block maps  content  map canvas         maps each function index  Element             infotext     Element  children   infotext             var myOptions                  zoom   parseInt  infotext children   zoom   text                  mapTypeId   google maps MapTypeId ROADMAP                    var map          var geocoder          var marker          var infowindow          var address    infotext children   address   text                             infotext children   city   text                             infotext children   state   text                            infotext children   zip   text                             infotext children   country   text                     var content     lt strong gt      infotext children   location   text       lt  strong gt  lt br   gt                      infotext children   address   text       lt br   gt                      infotext children   city   text                             infotext children   state   text                            infotext children   zip   text                     if  0  lt   infotext children   phone   text   length                content      lt br   gt      infotext children   phone   text                       geocoder   new google maps Geocoder            geocoder geocode   address   address   function results  status                if  status    google maps GeocoderStatus OK                    myOptions center   results 0  geometry location                  map   new google maps Map Element  myOptions                   marker   new google maps Marker                       map  map                      position  results 0  geometry location                      title   infotext children   location   text                                       infowindow   new google maps InfoWindow   content   content                    google maps event addListener map   tilesloaded   function event                        infowindow open map  marker                                       google maps event addListener marker   click   function                         infowindow open map  marker                                     else                   alert  The address could not be found for the following reason      status

User · Answer

OP wanted two specific maps  but if you d like to have a dynamic number of maps on one page  for instance a list of retailer locations  you need to go another route  The standard implementation of Google maps API defines the map as a global variable  this won t work with a dynamic number of maps  Here s my code to solve this without global variables   function mapAddress mapElement  address    var geocoder   new google maps Geocoder     geocoder geocode    address   address    function  results  status        if  status    google maps GeocoderStatus OK            var mapOptions                 zoom  14              center  results 0  geometry location              disableDefaultUI  true                    var map   new google maps Map document getElementById mapElement   mapOptions           var marker   new google maps Marker               map  map              position  results 0  geometry location                   else           alert  Geocode was not successful for the following reason      status                 Just pass the ID and address of each map to the function to plot the map and mark the address

User · Answer

I needed to load dynamic number of google maps  with dynamic locations  So I ended up with something like this  Hope it helps  I add LatLng as data-attribute on map div   So  just create divs with class  maps   Every map canvas can than have a various IDs and LatLng like this  Of course you can set up various data attributes for zoom and so     Maybe the code might be cleaner  but it works for me pretty well    lt div id  map123  class  maps  data-gps  46 1461154 17 1580882  gt  lt  div gt   lt div id  map456  class  maps  data-gps  45 1461154 13 1080882  gt  lt  div gt      lt script gt        var map        function initialize                Get all map canvas with   maps  and store them to a variable          var maps   document getElementsByClassName  maps             var ids  gps  mapId                   Loop  Explore all elements with   maps  and create a new Google Map object for them         for var i 0  i lt maps length  i                    Get ID of single div           mapId   document getElementById maps i  id                 Get LatLng stored in data attribute                    Make sure there is no space in data-attribute                      and the values are separated with comma               gps   mapId getAttribute  data-gps                  Convert LatLng to an array           gps   gps split                     Create new Google Map object for single canvas            map   new google maps Map mapId                zoom  15                 Use our LatLng array bellow             center  new google maps LatLng parseFloat gps 0    parseFloat gps 1                 mapTypeId   roadmap               mapTypeControl  true              zoomControlOptions                    position  google maps ControlPosition RIGHT TOP                                           Create new Google Marker object for new map           var marker   new google maps Marker                  Use our LatLng array bellow             position  new google maps LatLng parseFloat gps 0    parseFloat gps 1                 map  map                                    lt  script gt

[javascript] How to Display Multiple Google Maps per page with API V3

Examples related to javascript

Examples related to google-maps

Examples related to google-maps-api-3