Google Maps with multiple locations

Question

I'm embedding a Google map into a web application, this is what I have and it shows one location with a description. I'm trying to add a further 2 locations to the map, would anyone have an idea how to do this?

<script>
function myMap() {
  var myCenter = new google.maps.LatLng(55.1493166,-6.6784082);
  var mapCanvas = document.getElementById("map");
  var mapOptions = {center: myCenter, zoom: 8};
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({position:myCenter});
  marker.setMap(map);

  var infowindow = new google.maps.InfoWindow({
    content: "Ulster Univeristy, Sports Centre, Coleraine"
  });
  infowindow.open(map,marker);
}

The official documentation has examples of adding multiple markers to a map: https://developers.google.com/maps/documentation/javascript/markers — mrogers, Mar 14 '18 at 16:16

score 0 · Accepted Answer · answered Mar 14 '18 at 16:49

To add more markers to your map, I am going to assume that there are predefined locations. Create an array to store/manage your markers

var markers = [];

Create and store multiple locations (lat and lng) *n

var locations = [
    {lat:55.1493166, lng:-6.6784082}
    {lat:55.14316, lng:-6.67802}
    {lat:55.3166, lng:-6.68402}
];

Loop through locations and place markers

 for(var i = 0; i < locations.length; i++) {
      var pos = locations[i];
      var marker = new google.maps.Marker({
        map: map,
        position: pos
      });
      marker.setMap(map);
      markers.push(marker);
    }

Google Maps with multiple locations

1 Answers1