Add – Show Multiple Markers (Pins) on Google Map

Add – Show Multiple Markers (Pins) on Google Map

In this javascript google map tutorial, we would love to share with you how to add or show multiple markers (pins) on google maps with infowindows. Today we will discuss each thing step by step.

First we create html file after that we will implement css and javascript code for adding and showing multiple markers (pins) on google map. When we will click on markers or pins that time open infowindow showing address according to pins.

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

Let’s start


  • Create one html file
  • Implement css
  • Implement javascript code
  • Live Demo and Test

Create One html file

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

<!DOCTYPE html>
  <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 -</title>
  <link rel="stylesheet" href="" />

<div class="container">
  <div class="row">
  <div class="col-12">
   <div class="alert alert-success"><h2>Google Maps Multiple Marker(Pins) Javascript</h2>
   <div id="map_wrapper_div">
    <div id="map_tuts"></div>

Implement css

In this step we will implement some css for google map styling. Now put the css code on head section :

  padding: 2%;
  text-align: center;

 #map_wrapper_div {
  height: 400px;

#map_tuts {
    width: 100%;
    height: 100%;

Implement Javascript code

Finally we will implement javascript code for creating a map on web pages and adding and showing multiple markers ( pins ) on google maps. Now we will put the code on script tag after the closing of body tag.

jQuery(function($) {
// Asynchronously Load the map API 
var script = document.createElement('script');
script.src = "";
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);
// 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]);
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]);, marker);
})(marker, i));
// Automatically center the map fitting all markers on the screen
// 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) {


In this google map tutorial, we have successfully showing a multiple markers on google map with infowindows . We have displayed address(location) in infowindows.

Recommended JavaScript Tutorials


My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

3 replies to Add – Show Multiple Markers (Pins) on Google Map

  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 *