Sometimes, we want to display multiple Google Maps per page with API V3 and JavaScript.
In this article, we’ll look at how to display multiple Google Maps per page with API V3 and JavaScript.
How to display multiple Google Maps per page with API V3 and JavaScript?
To display multiple Google Maps per page with API V3 and JavaScript, we load each map on a different element.
For instance, we write
<div
id="map_canvas"
style="width: 700px; height: 500px; margin-left: 80px"
></div>
<div
id="map_canvas2"
style="width: 700px; height: 500px; margin-left: 80px"
></div>
to add 2 divs for 2 maps.
Then we write
let map;
let map2;
const initialize = (condition) => {
const 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);
};
to call the Map constructor with each div and myOptions to load the maps in the initialize function.
Conclusion
To display multiple Google Maps per page with API V3 and JavaScript, we load each map on a different element.
