loading...
Cover image for Multiple markers on Google Map in Angular app (The pro way) pt2

Multiple markers on Google Map in Angular app (The pro way) pt2

devpato profile image Pato ・3 min read

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 marker 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 this 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 part1, 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);
    });

2.- 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"
    }
  ];

3.-At the bottom of your class component create a new function called loadAllMarkers()

4.-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
})

5.- Create markers based on the markers information.

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

6.-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()
    });

})

7.-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);
    });
})

8.-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);
})

9.-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);
    });
  }

10.-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();
  }

Final Result

Alt Text

Discussion

pic
Editor guide
Collapse
camiramirez profile image
CamiRamirez

Thank you !!! It helped me a lot !!
But I have tried adding a checkbox to show / hide certain bookmarks, and was unsuccessful. Will you have an example that you can show me? I would be very grateful: D

Collapse
devpato profile image
Pato Author

Hi! I'm super busy right now. Ill prob have some time in 2 weeks to make the tutorial. Ill let you know if I do it. If you have some code example i can take a look to it too. preferible a repo on github or stackbliz

Collapse
akashvarma9 profile image
Akash Varma

Hi Pato,

what if there are multiple locations have same lat long? Markers formed as stack. Any solution for this?

Thanks in advance !

Collapse
devpato profile image
Pato Author

Hi Akash! you don't want them to be stacked? or you don't want to have duplicate markers?

Collapse
abhimanupati203 profile image
abhilash manupati

There are 6 store type of markers on map .How do i filter while switching options .Currently I re-intialiase the map while switching checklist this make map reload .Can you please help me how to achieve without flicker the map view

Thread Thread
devpato profile image
Pato Author

Hi! I'm super busy right now. Ill prob have some time in 2 weeks to make the tutorial. If you have some code example i can take a look to it too. preferible a repo on github or stackbliz

Collapse
aitemir profile image
Aitemir

Hey Pato! Thanks a lot for the tutorial. I am currently building my app which is supposed to calculate distances to several locations and return the shortest distance to recommend the user the nearest location. I've been researching a lot. So far, I was able to set up google maps using Angular Google Maps Api module (traditional and easy way as you say). However, after doing couple of your tutorials, I kinda liked how you did that.

What would be your recommendation on how to calculate the distances between one location (in my case geolocation of the user, which I know how to set up through navigation object) and the markers that I set up on the map using your method from this tutorial? Any thoughts and suggestions? Thank you!!!

Collapse
devpato profile image
Pato Author

Hi! I'm glad you have liked the tutorials. See at the end of the day if you can get the marker using the navigation object and any other object take a look to this answer on stackoverflow I answered.

stackoverflow.com/questions/528714...

Let me know if it helps you if not, let me know

Collapse
pukhtoonyar profile image
Irfan

Were you able to use clusterer with this approach?