Multiple Markers On Google Map In Angular App (The Pro Way) Part 2
Tags: angular, webdev, googlemaps, tutorial
Published: 2020-02-16 16:54:26

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:

```typescript
//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.

```typescript
  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.

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

5. Create markers based on the markers information.

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

6. Creating the info window of the marker

```typescript
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
```typescript
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
```typescript
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:

```typescript
  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:

```typescript
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](https://dev-to-uploads.s3.amazonaws.com/i/0h9g79b4la25th9ogsrd.png)

<img src="https://thepracticaldev.s3.amazonaws.com/i/5a87eog40zvcsimuaew4.png" />