Google Maps provides powerful mapping technology that you can use in your own applications. In this blog, I’ll explain how you can get started using markers in Google Maps in your Angular web applications.

Introduction

In one of the previous posts, we learned how to integrate Google Maps into an Angular web application.

In this post, I will show you how to add markers to your map and how to configure each marker with positioning, use a custom icon for your markers, and a few other useful tricks.

There are two options for adding a Marker to the map:
1. Adding a Marker using <map-marker></map-marker> tag in HTML
2. Adding a Marker using the new google.maps.Marker() method in JavaScript

Preparation of Data for Google Maps Markers

The marker has a set of properties that are used to display and process Output events to the Marker on the Map.

The full reference to the API can be found in the Google Maps API Docs and the Angular implementation in the source code.

To begin with, we will create an interface for our Markers (in the future we will update this interface to add new options to the Marker), with one option position:

import { Component, ViewChild } from '@angular/core';
import { GoogleMap } from '@angular/google-maps';

interface MarkerProperties {
  position: {
    lat: number;
    lng: number;
  }
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  @ViewChild('myGoogleMap', { static: true }) map!: GoogleMap;

  mapOptions: google.maps.MapOptions = {
    center: { lat: 48.8588548, lng: 2.347035 },
    zoom: 13,
  };
}

After that, we will create an array of markers, I added the positions of several markers:

import { Component, ViewChild } from '@angular/core';

interface MarkerProperties {
  position: {
    lat: number;
    lng: number;
  }
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  mapOptions: google.maps.MapOptions = {
    center: { lat: 48.8588548, lng: 2.347035 },
    zoom: 13,
  };

  markers: MarkerProperties[] = [
    { position: { lat: 48.8584, lng: 2.2945 }}, // Eiffel Tower
    { position: { lat: 48.8606, lng: 2.3376 }}, // Louvre Museum
    { position: { lat: 48.8530, lng: 2.3499 }}, // Cathédrale Notre-Dame de Paris
  ];
}

Adding a Marker Using the MapMarker Component

Using the prepared marker interface, in the HTML file of the component, we will add ngFor to the <map-marker> tag and update our template:

<div class="map">
  <google-map height="100vh"
              width="100%"
              [options]="mapOptions">
    <map-marker *ngFor="let marker of markers"
                [position]="marker.position"></map-marker>
  </google-map>
</div>

Adding a Marker Using the new google.maps.Marker() Method

To use the new google.maps.Marker() method to add a Marker to the map, we will update our component:

In the HTML file, you need to remove the tag and add an outgoing event handler for the tag.

<div class="map">
  <google-map height="100vh"
              width="100%"
              [options]="mapOptions"
              (mapInitialized)="handleMapInitialized($event)">
  </google-map>
</div>

mapInitialized event – an outgoing event that signals that the map is ready for work

readonly mapInitialized: EventEmitter<google.maps.Map>;

In the component, you need to add a handler for mapInitialized, the <google-map> output event

import { Component } from '@angular/core';

interface MarkerProperties {
  position: {
    lat: number;
    lng: number;
  }
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  mapOptions: google.maps.MapOptions = {
    center: { lat: 48.8588548, lng: 2.347035 },
    zoom: 13,
    mapTypeControl: false,
  };

  markers: MarkerProperties[] = [
    { position: { lat: 48.8584, lng: 2.2945 }}, // Eiffel Tower
    { position: { lat: 48.8606, lng: 2.3376 }}, // Louvre Museum
    { position: { lat: 48.8530, lng: 2.3499 }}, // Cathédrale Notre-Dame de Paris
  ];

  handleMapInitialized(map: google.maps.Map) {}
}

After adding the method to the component, let’s move on to adding Markers. We can add functionality for creating Markers to the map’s output event processing method like this:

handleMapInitialized(map: google.maps.Map) {
  this.markers.forEach((marker: MarkerProperties) => {
    new google.maps.Marker({
      position: marker.position,
      map,
    });
  });
}

Conclusion

I hope this quick guide to using Google Maps markers will help you easily get started using Google Maps markers in your Angular application. As we can see from the results, these two approaches work equally well, so the choice is yours which approach is best for your needs.