Add Multiple Markers on Google Map JavaScript

June 14, 2022June 14, 2022 Rabiya 0 Comments

How to Add Multiple Markers on Google maps javaScript

Add/show multiple markers on google map in javascript; Through this tutorial, i am going to show you how to add/show multiple markers on google maps with infowindows in JavaScript.

How to Add Multiple Markers on Google Map JavaScript

Follow the below steps and add/show multiple markers on google maps using javascript with infowindows:

Step 1 – Create HTML File For Display Multiple Markers
Step 2 – Add Google Maps API V3 in HTML
Step 3 – Implement JavaScript Function To Create Markers/Pins And Show on Google Map

Step 1 – Create HTML File For Display Multiple Markers

Create html file for display mutliple markers on google map; so add the following code into your html fie:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Google Maps Multiple Marker(Pins) Javascript - Laratutorials.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
  <div class="row">
  <div class="col-12">
   <div class="alert alert-success"><h2>Add Multiple Marker(Pins) Google Maps Javascript</h2>
   </div>
   <div id="map_wrapper_div">
    <div id="map_tuts"></div>
   </div>
  </div>
</div>
</body>
</html>

Then add following css into your html file:

<style>
.container{
padding:2%;
text-align: center;
}
#map-_wrapper_div{
heightpx;
}
#map_tuts {
width:100%;
height:100%;
}
</style>

Step 2 – Add Google Maps API V3 in HTML

Add google map api v3 into your html file; as shown below:

jQuery(function($) {
// Asynchronously Load the map API 
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});

Step 3 – Implement JavaScript Function To Create Markers/Pins And Show on Google Map

Implement javascript function to create markers/pins on google map; so add the following code into your html file:

<script>
jQuery(function($) {
// Asynchronously Load the map API 
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
     mapTypeId: 'roadmap'
};
                
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_tuts"), mapOptions);
map.setTilt(45);
    
// Multiple Markers
var markers = [
  ['Mumbai', 19.0760,72.8777],
  ['Pune', 18.5204,73.8567],
  ['Bhopal ', 23.2599,77.4126],
  ['Agra', 27.1767,78.0081],
  ['Delhi', 28.7041,77.1025],
];
                    
// Info Window Content
var infoWindowContent = [
    ['<div class="info_content">' +
    '<h3>Mumbai</h3>' +
    '<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],
    ['<div class="info_content">' +
    '<h3>Pune</h3>' +
    '<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],
    ['<div class="info_content">' +
    '<h3>Bhopal</h3>' +
    '<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],  
    ['<div class="info_content">' +
    '<h3>Agra</h3>' +
    '<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],
    ['<div class="info_content">' +
    '<h3>Delhi</h3>' +
    '<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],
];
    
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0]
    });
    
    // Each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));
    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(5);
    google.maps.event.removeListener(boundsListener);
});
}
</script>