Use Multiple Google Maps in same webpage

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 :



Recommended For You

About the Author: Admin