Multiple Markers On Google Map In Angular App (The Pro Way) Part 2

Welcome to the second part of the Setup Google Map in Angular app (The pro way) series!

In this section I'm going to show you how to create multiple markers, add them to your map, and set click events that will trigger the info window of the marker!

A few options:

a) If you completed Part 1, then continue with Part 2.

b) If you didn't do Part 1, go do it, then come back.

c) If you don't care about the setup in Part 1, then clone the branch part1 and continue from there.

Repo
https://github.com/devpato/angular-google-maps-tutorial

Note: Branch part2 contains the final code of this tutorial.

Let's get started

1.Let's add a click event to our existing default marker. Find the mapInitializer() function and right before you set the marker in the map, you will add the following code:

//Adding Click event to default marker
    this.marker.addListener("click", () => {
      const infoWindow = new google.maps.InfoWindow({
        content: this.marker.getTitle()
      });
      infoWindow.open(this.marker.getMap(), this.marker);
    });

At the top app.component.ts file before the constructor create a global variable of array of markers. This array will contain the markers information.

  markers = [
    {
      position: new google.maps.LatLng(40.73061, 73.935242),
      map: this.map,
      title: "Marker 1"
    },
    {
      position: new google.maps.LatLng(32.06485, 34.763226),
      map: this.map,
      title: "Marker 2"
    }
  ];

At the bottom of your class component, create a new function called loadAllMarkers()
Inside of that function, you are going to iterate thought the array of markers, to start creating markers, adding info windows, adding click events to the marker, and adding the marker to the map.

Let's start by iterating through the array of markers.

this.markers.forEach(markerInfo => {
  console.log
})

Create markers based on the markers information.

this.markers.forEach(markerInfo => {
    const marker = new google.maps.Marker({
      ...markerInfo
    });
})

Creating the info window of the marker

this.markers.forEach(markerInfo => {
    //...the marker creation code here
    const infoWindow = new google.maps.InfoWindow({
      content: marker.getTitle()
    });

})

Adding the click event to the marker

this.markers.forEach(markerInfo => {
    //...the marker creation code here
    //...info window creation code here
    marker.addListener("click", () => {
        infoWindow.open(marker.getMap(), marker);
    });
})

Adding marker to the map

this.markers.forEach(markerInfo => {
    //...the marker creation code here
    //...info window creation code here
    //...adding click event to marker code here
    marker.setMap(this.map);
})

You loadAllMarkers() function should look like this:

  loadAllMarkers(): void {
    this.markers.forEach(markerInfo => {
      //Creating a new marker object
      const marker = new google.maps.Marker({
        ...markerInfo
      });

      //creating a new info window with markers info
      const infoWindow = new google.maps.InfoWindow({
        content: marker.getTitle()
      });

      //Add click event to open info window on marker
      marker.addListener("click", () => {
        infoWindow.open(marker.getMap(), marker);
      });

      //Adding marker to google map
      marker.setMap(this.map);
    });
  }

At the bottom of your mapInitializer() function, call the loadAllMarkers() function

You mapInitializer() function should look like this:

mapInitializer(): void {
    this.map = new google.maps.Map(this.gmap.nativeElement, this.mapOptions);

    //Adding Click event to default marker
    this.marker.addListener("click", () => {
      const infoWindow = new google.maps.InfoWindow({
        content: this.marker.getTitle()
      });
      infoWindow.open(this.marker.getMap(), this.marker);
    });

    //Adding default marker to map
    this.marker.setMap(this.map);

    //Adding other markers
    this.loadAllMarkers();
  }

Blog

Multiple Markers On Google Map In Angular App (The Pro Way) Part 2

Pato

A few options:

Let's get started

Final Result

Join Our Newsletter. No Spam, Only the good stuff.

Related