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

Forge Component
Published on 2019-08-06 by Labs
39 votes
Published on 2019-08-06 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.



Hi Goncalo,

Which version of Google Maps API are you using?


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.