In this article, we will be learning to use multiple Google Maps in a single webpage. We will be taking the help of Google Maps JavaScript API in order to load multiple instances of google maps in our page.
HTML
For displaying multiple maps, you need multiple container for map. Just remember to specify height and width of the container. Here’s the sample HTML.
<div id="block-wrp">
<div class="block-item">
<div id="mapCanvas1" class="map-item"> </div>
<span class="city-name">Label 1</span>
</div>
<div class="block-item">
<div id="mapCanvas2" class="map-item"> </div>
<span class="city-name">Label 2</span>
</div>
</div>
JavaScript
In order to use the Google Maps JavaScript API, we need Google API key. If you don’t have one, refer Add multiple custom markers with legend in Google Map.
We can include maps API to our webpage simply by adding the following line.
<script async defer src="https://maps.google.com/maps/api/js?key=API_KEY&callback=drawMap"></script>
where API_KEY is the Google API key and drawMap is the callback function which is called once this API is loaded.
The callback function drawMap will look like this :
<script type="text/javascript">
var map1, map2;
function drawMap() {
var mapCenter = new google.maps.LatLng(-33.865143, 151.209900); // Sydney
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
center: mapCenter,
fullscreenControl: false
}
// Generate First Map
map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions);
// Generate Second Map
map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions);
}
</script>
Complete Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Use Multiple Google Maps in same webpage</title>
<style>
#block-wrp {
width: 784px;
display: flex;
display: -webkit-flex;
justify-content: space-around;
flex-wrap: wrap;
}
#block-wrp .block-item {
height: 400px;
width: 48%;
position: relative;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column
}
#block-wrp .block-item .map-item {
height: 90%
}
#block-wrp .block-item span.city-name {
text-align: center;
color: #000;
text-transform: uppercase;
font-weight: bold;
background: #a2ccff;
height: 10%;
line-height: 2em;
}
</style>
</head>
<body>
<h1>Use Multiple Google Maps in same webpage</h1>
<div id="block-wrp">
<div class="block-item">
<div id="mapCanvas1" class="map-item"> </div>
<span class="city-name">London</span> </div>
<div class="block-item">
<div id="mapCanvas2" class="map-item"> </div>
<span class="city-name">Amsterdam</span> </div>
</div>
<script type="text/javascript">
var map1, map2;
function drawMap() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
fullscreenControl: false
}
mapOptions.center = new google.maps.LatLng(51.509865, -0.118092); // London
map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions);
mapOptions.center = new google.maps.LatLng(52.370216, 4.895168); // Amsterdam
map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions);
}
</script>
<script async defer src="https://maps.google.com/maps/api/js?key=AIzaSyCvDN-LuS_9_VFkR71Sc56P6y4cwWKvEpU&callback=drawMap"></script>
</body>
</html>
Follow this video for complete guidance :
