How to Add Multiple Markers on Google maps javaScript

How to Add Multiple Markers on Google maps javaScript

Add multiple markers on google maps and display pins in javascript; Through this tutorial, you will learn how to add or show multiple markers (pins) on google maps with info windows in JavaScript + HTML.

This tutorial will create an HTML file and then implement CSS and javascript code for adding and showing multiple markers (pins) on google map. When you will click on markers or pins that time open an info window showing address according to pins.

Google map is the best and easiest way to adding and showing locations on website pages. Each marker on google maps showing particular locations.

How to Add Multiple Markers on Google maps javaScript

  • Create html file
  • Implement css for Markers on Google Map
  • Implement javascript code for show Multiple Markers on Google Map
  • Live Demo and Test

Create html file

In this first step you will create one html file and put the below code here :

<!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">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Google Maps Multiple Marker(Pins) Javascript - Tutsmake.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>Google Maps Multiple Marker(Pins) Javascript</h2>
   </div>
   <div id="map_wrapper_div">
    <div id="map_tuts"></div>
   </div>
  </div>
</div>
</body>
</html>

Implement css for Markers on Google Map

In this step, you need to implement some css for google map styling. Now put the css code on head section :

<style>
.container{
  padding: 2%;
  text-align: center;

 } 
 #map_wrapper_div {
  height: 400px;
}

#map_tuts {
    width: 100%;
    height: 100%;
}
</style>

Implement javascript code for show Multiple Markers on Google Map

Finally, you need to implement javascript code for creating a map on web pages and adding and showing multiple markers ( pins ) on google maps. Now add the code on script tag after the closing of body tag.

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

Conclusion

In this Google Maps tutorial, you have successfully shown multiple markers on Google Maps with info windows. you have displayed address(location) in info windows.

Recommended JavaScript Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

3 replies to How to Add Multiple Markers on Google maps javaScript

  1. Howdy very nice web site!! Man .. Excellent .. Amazing .. I’ll bookmark your blog and take the feeds also? I’m glad to find a lot of useful information right here within the submit, we’d like develop more techniques in this regard, thanks for sharing. . . . . .|

  2. Devendra, thank you so much for this education on Google Maps. It is exactly what I’ve been looking for. I would like to know if it is possible to pass in lat/long coordinates to the html page. Can you point me in the right direction please? Thanks so much.

Leave a Reply

Your email address will not be published. Required fields are marked *