[Google Maps] How to render two different maps with the same Google Maps API key?

Forge Component
(36)
Published on 6 Aug (12 days ago) by Labs
36 votes
Published on 6 Aug (12 days ago) by Labs

Hi all,


how can we use two maps in the same page with the same Google Maps API key? 

At the moment the second map doesn't render. 


Thanks for your help.


Cheers

Solution

Hi Goncalo,

Which version of Google Maps API are you using?

Solution

I assume you've two different containers with two different ids.

Initialize two GMap with same/different options say mapOptions.


// Generate First Map
map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions);
   
// Generate Second Map
map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions);


Hi Swatantra,

thank you for your help. I was using an old component that was using an deprecated version of google maps API so that's why I was having that issue, after changing the code to use the latest widget from Google Maps to render the map everything start working as expected.


Thank you for your tip.


Cheers