HomeJavaScriptGenerate multiple Google Maps on a page
December 31, 2017

Generate multiple Google Maps on a page

Want to display multiple google maps on a single page? Then, this post is for you.

Multiple Google Maps

In order to generate map, firstly you need HTML element where you can render map. You should specify size, i.e. height and width of the element.

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.

HTML

<html>
<head>
<meta charset="UTF-8">
<title>Adding Multiple Maps in a Page</title>
<style>
#block-wrp { width:784px; display:flex; display:-webkit-flex; }
#block-wrp .block-item { height:400px; width:48%; position:relative; }
#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:700; background:#a2ccff; height:10%;line-height:2em }
</style>
</head>

<body>

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

</body>
</html>

In the above snippet, there are 2 placeholders: mapCanvas1 & mapCanvas1.

Now that you have HTML structure, it’s time to do some JavaScript stuffs.

JavaScript

In order to use the Google Maps JavaScript API, you need Google API key. If you don’t have one, refer Add multiple custom markers with legend in Google Map.

You can include maps API to your page simply by adding the following line.

<script async defer src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY&callback=drawMap"></script>

where YOUR_API_KEY is the Google API key and drawMap is the callback function which is called once this API is loaded. You can rename it as you like.

The following script generates 2 different maps of the same location (Sydney).

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

If you want to display different locations, you just need to change the center property for map options while creating new  Google maps object.

Here’s the full code to display multiple maps of different locations.

Generating Multiple Google Maps (complete code)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Generating Multiple Maps in a Page</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>
<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="http://maps.google.com/maps/api/js?key=AIzaSyCvDN-LuS_9_VFkR71Sc56P6y4cwWKvEpU&callback=drawMap"></script>
</body>
</html>

In this way, you can show multiple google maps on a page.

Thanks for reading this article.

 

 

 

Related Posts

About The Author

thedebuggers

2 Comments
  1. Keith Taylor

    Very useful. I had been trying to show two maps, but failed. The secret, as you show, is to make only one call to the Google API. Thanks !

    Reply
  2. saakun

    excuse me, how can i add marker to the maps?

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.