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 }}