Google Maps is now an Angular component

[utterances-bot]

Google Maps is now an Angular component - Tim Deschryver

The Angular Component pearl-lullaby (v9.0.0-rc.0) release 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.

https://timdeschryver.dev/blog/google-maps-as-an-angular-component

[LluizSouza]

Hello, I have the following error message:

Error: src/app/app.component.html:4:56 - error TS2345: Argument of type 'HTMLElement' cannot be assigned to parameter of type 'MapMarker'.
Type 'HTMLElement' does not contain the following properties of type 'MapMarker': _googleMap, _ngZone, _eventManager, _title and 51 more.

4 [options]="markerOptions" (mapClick)="openInfoWindow(marker)">
~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: "./app.component.html",
~~~~~~~~~~~~~~~~~~~~~~
An error occurs in the AppComponent component template.

[timdeschryver]

@LluizSouza This blog post was written on a previous version of the Angular Google Maps component.
It could be that there are some breaking changes to the API, which result in incompatible code.
You can take a look in the Angular Components repository for an updated version of the docs, with corresponding examples.

I hope this helps.

[vanderson22]

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> <<<<<

How to secure the key ? YOUR_API_KEY <<< since this goes to client browser, and can be inspected.

[timdeschryver]

@vanderson22 the key is always visible, but you can restrict its usage.
https://developers.google.com/maps/api-security-best-practices

[jorgerenteria]

Hi Tim, how are you?
I´m using google-map component and I'm getting undefined in the "mapDragend" @output property.

Am I missing something?

<google-map
height="100%"
width="100%"
[center]="center"
[zoom]="11"
(mapDragend)="onMapDragend($event)"
(mapClick)="click($event)">

Best regards.

[itayperry]

It's sad that the map-marker-clusterer component does not work, that's how it can be fixed: https://stackoverflow.com/questions/71254907/angular-map-marker-clusterer-component-doesnt-work/71254908?noredirect=1#comment131873522_71254908

Thank you for this article :)

[liffeyd]

Is this component obsolete for Angular 15? A small app stopped working in the past week or so. I am assuming something changed with the Google API as I did not change the app.

I have now updated the app to angular 15 and cannot get it working.

This was my code for adding a number of markers that worked up to recently:

for each ...
var myMarker = ({
position: pinPosition,
title: memberName,
info: contentString,
iconUrl: iconUrl,
options: {
animation: google.maps.Animation.DROP
}
});

This line throws an error on myMapMarker:

  this.markers.push(myMarker);

Error:

Argument of type '{
position: { lat: number; lng: number; };
title: string;
info: string;
iconUrl: string;
options: {
animation: google.maps.Animation;
};
}'
is not assignable to parameter of type 'MapMarker'.

Type '{
position: { lat: number; lng: number; };
title: string;
info: string;
iconUrl: string;
options: {
animation: Animation;
};
}'
is missing the following properties from type 'MapMarker': _googleMap, _ngZone, _eventManager, _title, and 49 more.

MapMarker appears to be:

MapMarker(_googleMap: GoogleMap, _ngZone: NgZone): MapMarker

and not

MapMarker(title, position, label, clickable, options) 

as defined above on this page.

What am I missing?

Pardon my ignorance, I am relatively new to this ;)

Any suggestions appreciated.

[liffeyd]

Environment relating to my post above:

Angular CLI: 15.2.0
Node: 18.14.2
Package Manager: npm 9.5.1
OS: win32 x64

Angular: 15.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... google-maps, material, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1502.0
@angular-devkit/build-angular 15.2.0
@angular-devkit/core 15.2.0
@angular-devkit/schematics 15.2.0
@schematics/angular 15.2.0
rxjs 7.8.0
typescript 4.9.5

and: "@angular/google-maps": "^15.2.0",

[JohnTranstel]

Hi Tim, thanks, this is great stuff, very useful. As well as working with I am using which works great for displaying the polygons from my database, but there seems to be no equivalent mapClick event. I have tried setting[clickable] to true and adding [click] and [onClick] properties. I have tried the listener events approach but cannot make it work. Do you know if there is a property of that would work when clicked?

[mizanurrahman13]

I'm trying to show MapInfoWindow for every marker but stucked with the first info in every single mark. Need help to overcome the problem.

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

Shop Name: {{ markerPosition.label }}

Contact No: {{ markerPosition.title }}

Shop Address: {{ markerPosition.address }}

[merbinmento01]

Hey, I have implemented google-maps in my angular app, but I am not able to change the orientation(heading) manually by dragging using two fingers when I am using it in my mobile browser. Is there any way I can achieve that?

[Amnish04]

Beautiful post, Thanks!

[kenlnetherland]

Following your instructions to a T and nothing is showing on the page. Went through all versions from 16 cagegory. No exceptions thrown, nothing in the debug console.

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

[kenlnetherland]

You do not need to answer my previous question. I went back to the old DIV method. Earlier versions of this in contrast to your article version are apparently not working. Thank you though.

[williambechard]

This article has been very useful for me. Wanted to let others know, instead of adding the key to the index file in a standalone angular build you can inject the key within the AppComponent (example below)

imports:[GoogleMapsModule...]
.....

ngOnInit() {
this.loadGoogleMapsApi();
}

loadGoogleMapsApi(): void {
if (!this.isGoogleMapsLoaded()) {
const script = document.createElement('script');
script.src = https://maps.googleapis.com/maps/api/js?key=${env.MAPS_API_KEY};
script.async = true;
script.defer = true;
document.head.appendChild(script);
}
}

isGoogleMapsLoaded(): boolean {
return typeof google !== 'undefined' && typeof google.maps !== 'undefined';
}

[crazyhackkk]

Hi, I'm getting this error while trying to open Map Info Window is there anything you have regrading this..

36 ERROR TypeError: anchor.getAnchor is not a function
at MapInfoWindow.open (google-maps.js!transpiled:1350:60)
at Object.eval [as handleEvent] (app.template.html:141:29)
at handleEvent (core.js!transpiled:23376:45)
at callWithDebugContext (core.js!transpiled:24281:29)
at Object.debugHandleEvent [as handleEvent] (core.js!transpiled:24147:16)
at dispatchEvent (core.js!transpiled:18373:29)
at eval (core.js!transpiled:19089:20)
at Object.eval [as next] (Subscriber.js:161:21)
at Subscriber.next (Subscriber.js:101:26)
app.template.html:136 ERROR CONTEXT
DebugContext {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}