Add more markers with different location in Google maps in JavaScript code

Question

How can I add more locations to my google maps and have them get the same marker icon to each different location?

Here's the code:

$(function() {
  function initMap() {
    var location = new google.maps.LatLng(50.0875726, 14.4189987);

    var mapCanvas = document.getElementById("map");
    var mapOptions = {
      center: location,
      zoom: 16,
      panControl: false,
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);

    var markerImage = "marker.png";

    var marker = new google.maps.Marker({
      position: location,
      map: map,
      icon: markerImage
    });

    var contentString =
      '<div class="info-window">' +
      "<h3>Info Window Content</h3>" +
      '<div class="info-content">' +
      "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>" +
      "</div>" +
      "</div>";

    var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 400
    });

    marker.addListener("click", function() {
      infowindow.open(map, marker);
    });

    var styles = [
      {
        featureType: "landscape",
        stylers: [{ saturation: -100 }, { lightness: 65 }, { visibility: "on" }]
      },
      {
        featureType: "poi",
        stylers: [
          { saturation: -100 },
          { lightness: 51 },
          { visibility: "simplified" }
        ]
      },
      {
        featureType: "road.highway",
        stylers: [{ saturation: -100 }, { visibility: "simplified" }]
      },
      {
        featureType: "road.arterial",
        stylers: [{ saturation: -100 }, { lightness: 30 }, { visibility: "on" }]
      },
      {
        featureType: "road.local",
        stylers: [{ saturation: -100 }, { lightness: 40 }, { visibility: "on" }]
      },
      {
        featureType: "transit",
        stylers: [{ saturation: -100 }, { visibility: "simplified" }]
      },
      {
        featureType: "administrative.province",
        stylers: [{ visibility: "off" }]
      },
      {
        featureType: "water",
        elementType: "labels",
        stylers: [
          { visibility: "on" },
          { lightness: -25 },
          { saturation: -100 }
        ]
      },
      {
        featureType: "water",
        elementType: "geometry",
        stylers: [{ hue: "#ffff00" }, { lightness: -25 }, { saturation: -97 }]
      }
    ];

    map.set("styles", styles);
  }

  google.maps.event.addDomListener(window, "load", initMap);
});

I will be very grateful for your help, I am still learning.

Eddie · Accepted Answer · 2019-04-13T16:13:50.907

1

You can create an array of objects that contains the coordinates (lat and long). Use forEach to loop thru the array and make a marker.

var listOfLocations = [
  {lat: 18.906286,lng: 19.102439},      //Somewhere in Africa
  {lat: 8.331083,lng: 105.549002},      //Somewhere near Vietnam
  {lat: -27.440040,lng: 135.067341},    //Somewhere in Australia
  {lat: -14.338904,lng: -51.507365},    //Somewhere in Brazil
];

listOfLocations.forEach(function(o) {               //Loop thru the array
  var marker = new google.maps.Marker({             //Make the marker and add to the map
    position: o,
    map: map,
    icon: markerImage                               //Set image
  });
})

Note: No need to make new google.maps.LatLng object as per Google Map Marker Doc

edited Apr 13 '19 at 16:13

answered Apr 13 '19 at 15:01

Eddie

26,593
6
36
58

I am sorry to be such a bother,can you show me how the code will look like as a whole, I am new and can't fully comprehend how to fix it. – skan Apr 13 '19 at 15:42
You can copy the code and paste it after your map. The locations are scattered across the world. You might need to zoom out to see all the markers. @skan – Eddie Apr 13 '19 at 15:43
Sorry again but where do i put the new locations that you so generously provided I tried but the map did not show up. – skan Apr 13 '19 at 15:55
Does the map show without the new code? – Eddie Apr 13 '19 at 15:59
yes it does and it shows this location "" var location = new google.maps.LatLng(50.0875726, 14.4189987);"" with it's marker. – skan Apr 13 '19 at 16:02
You can paste the code after `marker.addListener("click", function() { infowindow.open(map, marker); });` – Eddie Apr 13 '19 at 16:03
My friend you are awesome thanks a lot. if it does not bother you can you tell me how can i get the new locations to have the same Marker icon like the previous one ? – skan Apr 13 '19 at 16:07
You mean, how to get new lat and long near the original marker? – Eddie Apr 13 '19 at 16:09
No i am using a image as the icon of the marker instead of the default one,Do you know how can I have all the locations use the same image ? – skan Apr 13 '19 at 16:12
Ohhh... I updated the code. Please check – Eddie Apr 13 '19 at 16:14
you are a hero thanks a lot I am so grateful to you.it really outstanding how can you understand coding so well. Thanks a lot. – skan Apr 13 '19 at 16:19

Add more markers with different location in Google maps in JavaScript code

1 Answers1