DEV Community

Cover image for Google Maps is now an Angular component
Angular profile image Tim Deschryver
Tim Deschryver for Angular

Posted on • Edited on • Originally published at timdeschryver.dev

Google Maps is now an Angular component

#angular #material #typescript #googlemaps

The new Angular Component pearl-lullaby (v9.0.0-rc.0) introduces the second official @angular/component component, a Google Maps component.
In this post, we take a look at getting started with the Google Maps component.

Earlier this year, we changed the name of this repo to "angular/components" to emphasize our goal
to provide more than Material Design components. The 9.0.0 release includes one of the next new
features in that regard- a new package that wraps the Google Maps JavaScript API in an easy-to-use Angular component.

I'm really looking forward to the team broadening up the repository to create components.
We already saw a YouTube Player component in v8.2.0, which is explored in Craig's article.

These new integrations with existing JavaScript APIs are making it easier for us to do our jobs,
and I'm curious about the other new components that will be released in the upcoming versions!

Setup

Angular

The Google Maps module can be installed from @angular/google-maps.

npm install @angular/google-maps
Enter fullscreen mode Exit fullscreen mode

When the installation is finished, we must add the Angular module GoogleMapsModule to the import declaration.

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { GoogleMapsModule } from '@angular/google-maps'

import { AppComponent } from './app.component'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, GoogleMapsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

The GoogleMapsModule exports three components that we can use:

  • GoogleMap: this is the wrapper around Google Maps, available via the google-map selector
  • MapMarker: used to add markers on the map, available via the map-marker selector
  • MapInfoWindow: the info window of a marker, available via the map-info-window selector

Loading the Maps JavaScript API

We also have to import the Maps API, this can be done by adding a script tag in the index.html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Map</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

To use the map in a production environment you will need to create a new API Key, follow the documentation to create a new key.

Usage

GoogleMap

By adding the Google Maps component to a template we can already see and use the Google Map.
The map will behave as a default map with the default functionality, for example, you can zoom in and out, and drag in the map.

<google-map></google-map>
Enter fullscreen mode Exit fullscreen mode

Screenshot of Google Maps

Input properties

We can customize the styling of the default map by using the @Input() properties.
The most commonly used properties are added as @Input properties, we can set the size of the map, set the center, and set the zoom level.

Property Description
height Sets the initial height
width Sets the initial width
center Sets the initial center
zoom Sets the initial zoom
options Sets the options, for more info see the docs

To make full use of the Google Maps API, we can also use the options property.
Using the explicit properties wins over using the options property.
The options property has the same has the interface as the Map Options interface.

<google-map
  height="500px"
  width="100%"
  [zoom]="zoom"
  [center]="center"
  [options]="options"
></google-map>

<!-- Use custom zoom buttons -->
<button (click)="zoomIn()">Zoom in</button>
<button (click)="zoomOut()">Zoom out</button>
Enter fullscreen mode Exit fullscreen mode 
export class AppComponent implements OnInit {
  zoom = 12
  center: google.maps.LatLngLiteral
  options: google.maps.MapOptions = {
    mapTypeId: 'hybrid',
    zoomControl: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    maxZoom: 15,
    minZoom: 8,
  }

  ngOnInit() {
    navigator.geolocation.getCurrentPosition(position => {
      this.center = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      }
    })
  }

  zoomIn() {
    if (this.zoom < this.options.maxZoom) this.zoom++
  }

  zoomOut() {
    if (this.zoom > this.options.minZoom) this.zoom--
  }
}
Enter fullscreen mode Exit fullscreen mode

Screenshot of the customized Google Maps

Output properties

The GoogleMap component exposes all the Google Maps API events as @Output() properties:

Property JavaScript API Method Description
boundsChanged bounds_changed This event is fired when the viewport bounds have changed
centerChanged center_changed This event is fired when the map center property changes
mapClick click This event is fired when the user clicks on the map
mapDblclick dblclick This event is fired when the user double-clicks on the map. Note that the click event will also fire, right before this one
mapDrag drag This event is repeatedly fired while the user drags the map
mapDragend dragend This event is fired when the user stops dragging the map
mapDragstart dragstart This event is fired when the user starts dragging the map
headingChanged heading_changed This event is fired when the map heading property changes
idle idle This event is fired when the map becomes idle after panning or zooming
maptypeidChanged maptypeid_changed This event is fired when the mapTypeId property changes
mapMousemove mousemove This event is fired whenever the user's mouse moves over the map container
mapMouseout mouseout This event is fired when the user's mouse exits the map container
mapMouseover mouseover This event is fired when the user's mouse enters the map container
projectionChanged projection_changed This event is fired when the projection has changed
mapRightclick rightclick This event is fired when the DOM contextmenu event is fired on the map container
tilesloaded tilesloaded This event is fired when the visible tiles have finished loading
tiltChanged tilt_changed This event is fired when the map tilt property changes
zoomChanged zoom_changed This event is fired when the map zoom property changes

Covering all of these events would be a lot for one post, in this post we'll go over the click() event.
If you're interested in all the events I refer you to the Google Maps API Docs for the complete list, and the Angular implementation in the source code.

<google-map (mapClick)="click($event)"></google-map>
Enter fullscreen mode Exit fullscreen mode 
export class AppComponent implements OnInit {
  click(event: google.maps.MouseEvent) {
    console.log(event)
  }
}
Enter fullscreen mode Exit fullscreen mode
Methods and getters

If we keep a reference to the map component, by using the @ViewChild decorator, we can also use the following methods and getters.

Function Description
fitBounds Sets the viewport to contain the given bounds
panBy Changes the center of the map by the given distance in pixels
panTo Changes the center of the map to the given LatLng
panToBounds Pans the map by the minimum amount necessary to contain the given LatLngBounds
getBounds Returns the lat/lng bounds of the current viewport
getCenter Returns the position displayed at the center of the map
getClickableIcons Returns the clickability of the map icons
getHeading Returns the compass heading of aerial imagery
getMapTypeId Returns the map type id
getProjection Returns the current Projection
getStreetView Returns the default StreetViewPanorama bound to the map, which may be a default panorama embedded within the map
getTilt Returns the current angle of incidence of the map, in degrees from the viewport plane to the map plane
getZoom Returns the current zoom
controls Additional controls to attach to the map
data An instance of Data, bound to the map
mapTypes A registry of MapType instances by string ID
overlayMapTypes Additional map types to overlay

As an example, we can log the current center of the map.

export class AppComponent implements OnInit {
  @ViewChild(MapInfoWindow, { static: false }) info: MapInfoWindow

  logCenter() {
    console.log(JSON.stringify(this.map.getCenter()))
  }
}
Enter fullscreen mode Exit fullscreen mode

MapMarker

Input properties

With the map in place, we can start adding markers.
This is done by using the MapMarker component.
To add a marker, make sure the marker is added inside the google-map tag otherwise it will not be displayed.

Just like the MapControl, the most frequently used options can be set directly with @Input() properties, but it's also possible to make use of the full options set of the MapMarker.

<google-map>
  <map-marker
    *ngFor="let marker of markers"
    [position]="marker.position"
    [label]="marker.label"
    [title]="marker.title"
    [options]="marker.options"
  >
  </map-marker>
</google-map>
Enter fullscreen mode Exit fullscreen mode 
export class AppComponent implements OnInit {
  addMarker() {
    this.markers.push({
      position: {
        lat: this.center.lat + ((Math.random() - 0.5) * 2) / 10,
        lng: this.center.lng + ((Math.random() - 0.5) * 2) / 10,
      },
      label: {
        color: 'red',
        text: 'Marker label ' + (this.markers.length + 1),
      },
      title: 'Marker title ' + (this.markers.length + 1),
      options: { animation: google.maps.Animation.BOUNCE },
    })
  }
}
Enter fullscreen mode Exit fullscreen mode

Screenshot of Google Maps with markers

The full specification of the marker:

Property Description
title Sets the title, visible on hover
position Sets the position
label Sets the label
clickable If the marker should listen to mouse and touch events, default is true
options Sets the options, for more info see the docs

Output properties

The MapMarker component also exposes the Google Maps API events as @Output() properties:

Property JavaScript API Method Description
animationChanged animation_changed This event is fired when the marker's animation property changes
mapClick click This event is fired when the marker icon was clicked
clickableChanged clickable_changed This event is fired when the marker's cursor property changes
cursorChanged cursor_changed This event is fired when the marker's cursor property changes
mapDblclick dblclick This event is fired when the marker icon was double clicked
mapDrag drag This event is repeatedly fired while the user drags the marker
mapDragend dragend This event is fired when the user stops dragging the marker
draggableChanged draggable_changed This event is fired when the marker's draggable property changes
mapDragstart dragstart This event is fired when the user starts dragging the marker
flatChanged flat_changed This event is fired when the marker's flat property changes
iconChanged icon_changed This event is fired when the marker icon property changes
mapMousedown mousedown This event is fired for a mousedown on the marker
mapMouseout mouseout This event is fired when the mouse leaves the area of the marker icon
mapMouseover mouseover This event is fired when the mouse enters the area of the marker icon
mapMouseup mouseup This event is fired for a mouseup on the marker
positionChanged position_changed This event is fired when the marker position property changes
mapRightclick rightclick This event is fired for a rightclick on the marker
shapeChanged shape_changed This event is fired when the marker's shape property changes
titleChanged title_changed This event is fired when the marker title property changes
visibleChanged visible_changed This event is fired when the marker's visible property changes
zindexChanged zindex_changed This event is fired when the marker's zIndex property changes

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

MapInfoWindow

The last component is MapInfoWindow, it can be used to open a pop-up window of a marker.
To show the pop-up we have to add the component inside the google-map template.

<map-info-window>Hello Google Maps</map-info-window>
Enter fullscreen mode Exit fullscreen mode

The above does nothing, to make it appear we have to open the info window when we click on a marker.
We bind the mapClick() method to the marker and pass the marker reference to the openInfo method to open the info window.

<map-marker
  #markerElem
  *ngFor="let marker of markers"
  [position]="marker.position"
  [label]="marker.label"
  [title]="marker.title"
  [options]="marker.options"
  (mapClick)="openInfo(markerElem)"
>
</map-marker>
Enter fullscreen mode Exit fullscreen mode

Finally, we also have a reference to the MapInfoWindow component inside our component.
We can do this by using the @ViewChild decorator.
By having the reference to the info window and the marker, we can open the info window by using the infoWindow.open() method.

export class AppComponent implements OnInit {
  @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow

  openInfo(marker: MapMarker, content) {
    this.infoWindow.open(marker)
  }
}
Enter fullscreen mode Exit fullscreen mode
Input properties
Property Description
options Sets the options, for more info see the docs
Output properties
Property JavaScript API Method Description
closeclick closeclick This event is fired when the close button was clicked
contentChanged content_changed This event is fired when the content property changes
domready domready This event is fired when the <div> containing the InfoWindow's content is attached to the DOM
positionChanged position_changed This event is fired when the position property changes
zindexChanged zindex_changed This event is fired when the InfoWindow's zIndex changes

Methods and getters

By using the infoWindow property, that has a reference to the MapInfoWindow component we can make use of its following methods and getters

Property Description
close Closes this InfoWindow by removing it from the DOM structure
getContent Returns the content of the InfoWindow
getPosition Returns the position of the InfoWindow
getZIndex Returns the z-index of the InfoWindow
open Opens the MapInfoWindow using the provided MapMarker as the anchor. If the anchor is not set, then the position property of the options input is used instead.
Dynamic content

Having static content inside the info window is a bit dull.
To provide dynamic content inside the info window, we can create a string property within the component, this looks as follows.

<map-info-window>{{ infoContent }}</map-info-window>
Enter fullscreen mode Exit fullscreen mode 
export class AppComponent implements OnInit {
  @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow
  infoContent = ''

  openInfo(marker: MapMarker, content) {
    this.infoContent = content
    this.infoWindow.open(marker)
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Putting it all together

The upcoming version of Angular brings us a whole range of positive changes and new possibilities.
We were already looking forward to the Ivy release in Angular v9, but now we'll also look forward to the new release of @angular/components.

Besides the new MapComponent there will also be an integration with the Clipboard API within the Angular CDK, as explored in Use the new Angular Clipboard CDK to interact with the clipboard.

The Angular component is very new, that's why the documentation and example code is minimal.
Because the Angular implementation follows the Google Maps API specs, we can take a look at the rich documentation from the JavaScript API.

See the code below for the full explored example of this post.

<google-map
  height="500px"
  width="100%"
  [zoom]="zoom"
  [center]="center"
  [options]="options"
  (mapClick)="click($event)"
>
  <map-marker
    #markerElem
    *ngFor="let marker of markers"
    [position]="marker.position"
    [label]="marker.label"
    [title]="marker.title"
    [options]="marker.options"
    (mapClick)="openInfo(markerElem, marker.info)"
  >
  </map-marker>

  <map-info-window>{{ infoContent }}</map-info-window>
</google-map>

<button (click)="zoomIn()">Zoom in</button>
<button (click)="zoomOut()">Zoom out</button>
<button (click)="logCenter()">Log center</button>
<button (click)="addMarker()">Add marker</button>
Enter fullscreen mode Exit fullscreen mode 
import { Component, OnInit, ViewChild } from '@angular/core'
import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  @ViewChild(GoogleMap, { static: false }) map: GoogleMap
  @ViewChild(MapInfoWindow, { static: false }) info: MapInfoWindow

  zoom = 12
  center: google.maps.LatLngLiteral
  options: google.maps.MapOptions = {
    zoomControl: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    mapTypeId: 'hybrid',
    maxZoom: 15,
    minZoom: 8,
  }
  markers = []
  infoContent = ''

  ngOnInit() {
    navigator.geolocation.getCurrentPosition(position => {
      this.center = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      }
    })
  }

  zoomIn() {
    if (this.zoom < this.options.maxZoom) this.zoom++
  }

  zoomOut() {
    if (this.zoom > this.options.minZoom) this.zoom--
  }

  click(event: google.maps.MouseEvent) {
    console.log(event)
  }

  logCenter() {
    console.log(JSON.stringify(this.map.getCenter()))
  }

  addMarker() {
    this.markers.push({
      position: {
        lat: this.center.lat + ((Math.random() - 0.5) * 2) / 10,
        lng: this.center.lng + ((Math.random() - 0.5) * 2) / 10,
      },
      label: {
        color: 'red',
        text: 'Marker label ' + (this.markers.length + 1),
      },
      title: 'Marker title ' + (this.markers.length + 1),
      info: 'Marker info ' + (this.markers.length + 1),
      options: {
        animation: google.maps.Animation.BOUNCE,
      },
    })
  }

  openInfo(marker: MapMarker, content) {
    this.infoContent = content
    this.info.open(marker)
  }
}
Enter fullscreen mode Exit fullscreen mode

Follow me on Twitter at @tim_deschryver | Originally published on timdeschryver.dev.

Top comments (10)

Collapse
 
devpato profile image
Pato •

What's the main difference between this and AGM?

Collapse
 
timdeschryver profile image
Tim Deschryver •

I'm not very familiar with AGM.
Seems like they provide similar features, but with a slightly different API.
AGM also seems to have some extra libs to draw on the map - angular-maps.com/api-docs/.

Looking into the feature, I would guess that the official component will follow the Angular upgrade paths - whereas for AGM it might take some time to follow the Angular upgrades.

Collapse
 
devpato profile image
Pato •

Awesome response number 2!! :) Yeah, AGM hasn't been updated in a year I believe

Thread Thread
 
iyashu5040 profile image
Iyashu5040 •

According to the @agm/core npm page, AGM came out of beta 2 months ago. So seems at least kind of active.

Thread Thread
 
devpato profile image
Pato •

winning

Collapse
 
gadrawingz profile image
Gad Iradufasha •

Great post... Anyways, Is Google Map available in React.js too?

Collapse
 
timdeschryver profile image
Tim Deschryver •

I'm not following React as I am Angular, but AFAIK there is no "official react" google map component. I'm sure there's a 3rd party module that has a google map component tho, and if that's not the case you could write a wrapper around the google map api.

Collapse
 
devpato profile image
Pato •

The API it is

Collapse
 
jwp profile image
John Peters •

Tim... how would we incorporate a proxy to address CORS Restrictions?

Collapse
 
fancyfranci profile image
Franciska Perisa •

The ViewChild in the code after "As an example, we can log the current center of the map." seems to be the wrong one :)
Besides that: A very helpful article!

Read next

apollotoday profile image

Deploying Next.js + Pocketbase to a single Fly.io machine

Nick -

abhay_yt_52a8e72b213be229 profile image

Why TypeScript is the Future of JavaScript Development: Benefits and Adoption

Abhay Singh Kathayat -

msm8 profile image

Building Composable Platforms with Harmony

John Brooks -

rajnandan1 profile image

Built a cli for browser

Raj Nandan Sharma -