Skip to Content (Press Enter)
2023-10-09 10-31-52
Gonçalo Azambujo
65Views
3Comments
Solved
[Google Maps Web] How to render two different maps with the same Google Maps API key?
Question
Forge
google-maps-web
Web icon
Google Maps Web (O11)
Forge asset 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

0
0
01 Aug 2019
Copy Link
2018-09-27 18-20-33
Swatantra Kumar
Champion
Solution

Hi Goncalo,

Which version of Google Maps API are you using?

0
0
01 Aug 2019
Copy Link
2018-09-27 18-20-33
Swatantra Kumar
Champion

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


0
0
01 Aug 2019
Copy Link
2023-10-09 10-31-52
Gonçalo Azambujo

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

0
0
02 Aug 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.