DEV Community

Cover image for Multiple Markers On Google Map In Angular App (The Pro Way) Part 2
Pato
Pato

Posted on • Updated on

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);
    });
Enter fullscreen mode Exit fullscreen mode
  1. 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"
    }
  ];
Enter fullscreen mode Exit fullscreen mode
  1. At the bottom of your class component, create a new function called loadAllMarkers()

  2. 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
})
Enter fullscreen mode Exit fullscreen mode
  1. Create markers based on the markers information.
this.markers.forEach(markerInfo => {
    const marker = new google.maps.Marker({
      ...markerInfo
    });
})
Enter fullscreen mode Exit fullscreen mode
  1. 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()
    });

})
Enter fullscreen mode Exit fullscreen mode
  1. 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);
    });
})
Enter fullscreen mode Exit fullscreen mode
  1. 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);
})
Enter fullscreen mode Exit fullscreen mode
  1. 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);
    });
  }
Enter fullscreen mode Exit fullscreen mode
  1. 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();
  }
Enter fullscreen mode Exit fullscreen mode

Final Result

Alt Text

Top comments (11)

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 • Edited

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

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 • Edited

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

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?

Collapse
 
abhishekfasate profile image
Abhishek Fasate

Property 'map' has no initializer and is not definitely assigned in the constructor

Collapse
 
ervinpepic profile image
Ervin Pepic

Hi Pato, can you please explain in a short way how can we filter multiple marker using (keyup) or (change) with ngModel bind?

like this one
developers.google.com/community/ex...