The 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.
The Google Maps module can be installed from
npm install @angular/google-maps
When the installation is finished, we must add the Angular module
GoogleMapsModule to the
GoogleMapsModule exports three components that we can use:
GoogleMap: this is the wrapper around Google Maps, available via the
MapMarker: used to add markers on the map, available via the
MapInfoWindow: the info window of a marker, available via the
We also have to import the Maps API, this can be done by adding a script tag in the
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.
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.
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.
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.
GoogleMap component exposes all the Google Maps API events as
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.
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.
As an example, we can log the current center of the map.
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.
The full specification of the marker:
MapMarker component also exposes the Google Maps API events as
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
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.
Finally, we also have to add 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
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:
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.
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
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.
See the code below for the full explored example of this post.
Follow me on Twitter at @tim_deschryver.