google map to display multiple markers in each external links location click without page refresh

Question

I wanted to display the Google map to pin multiple stores in each location.

For example, locations are

• Chennai
• Trichy
• Bangalore

Answer 1

You can make several changes in the existing code:

• add an array markers to keep all your markers
• add a property, for example tag to each marker and set there the value of the location this marker belongs to
• write a function that filters markers according to the tag
• finally, add link elements that call this function to filter markers on click event.

Proof of concept

// necessary variables
var map;
var infoWindow;
var markers = [];

// markersData variable stores the information necessary to each marker
var markersData = [
   {
      lat: 40.6386333,
      lng: -8.745,
      name: "Jayasurya Tex",
      address1:"Anna strret",
      address2: "Chennai",
      postalCode: "625789" // don't insert comma in the last item of each marker
   },
   {
      lat: 40.59955,
      lng: -8.7498167,
      name: "Ram Tex",
      address1:"65 Kovalan strret",
      address2: "Chennai",
      postalCode: "625001" // don't insert comma in the last item of each marker
   },
   {
      lat: 40.6247167,
      lng: -8.7129167,
      name: "Niva Tex",
      address1:"75 small bazar street",
      address2: "Trichy",
      postalCode: "698547" // don't insert comma in the last item of each marker
   } // don't insert comma in the last item
];


function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(40.601203,-8.668173),
      zoom: 9,
      mapTypeId: 'roadmap',
   };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // a new Info Window is created
   infoWindow = new google.maps.InfoWindow();

   // Event that closes the Info Window with a click on the map
   google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
   });

   // Finally displayMarkers() function is called to begin the markers creation
   displayMarkers();
}

// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(){

   // this variable sets the map bounds according to markers position
   var bounds = new google.maps.LatLngBounds();

   // for loop traverses markersData array calling createMarker function for each marker 
   for (var i = 0; i < markersData.length; i++){

      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var name = markersData[i].name;
      var address1 = markersData[i].address1;
      var address2 = markersData[i].address2;
      var postalCode = markersData[i].postalCode;

      createMarker(latlng, name, address1, address2, postalCode);

      // marker position is added to bounds variable
      bounds.extend(latlng);  
   }

   // Finally the bounds variable is used to set the map bounds
   // with fitBounds() function
   map.fitBounds(bounds);
}

// This function creates each marker and it sets their Info Window content
function createMarker(latlng, name, address1, address2, postalCode){
   var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: name
   });
   
   marker.tag = address2;
   markers.push(marker);

   // This event expects a click on a marker
   // When this event is fired the Info Window content is created
   // and the Info Window is opened.
   google.maps.event.addListener(marker, 'click', function() {

      // Creating the content to be inserted in the infowindow
      var iwContent = '
' +
            '
' + name + '
' +
         '
' + address1 + '
' +
         address2 + '
' +
         postalCode + '
';

      // including content to the Info Window.
      infoWindow.setContent(iwContent);

      // opening the Info Window in the current map and at the current marker location.
      infoWindow.open(map, marker);
   });
}

function filterMarkersByTag(tagName) {
    var bounds = new google.maps.LatLngBounds();
    
    markers.forEach(function(marker) {
        marker.setMap(null);
    });

    var filtered = markers.filter(function(marker) {
        return marker.tag === tagName;
    }); 
    
    if (filtered && filtered.length) {
        filtered.forEach(function(marker) {
            bounds.extend(marker.getPosition());
            marker.setMap(map);
        });

        map.fitBounds(bounds);
    }
}

#map-canvas {
    height: 50%;
}
#iw_container .iw_title {
    font-size: 16px;
    font-weight: bold;
}
.iw_content {
    padding: 15px 15px 15px 0;
}

Chennai
Trichy

I hope this helps!