Google Maps is now an Angular component about timdeschryver.dev HOT 10 CLOSED

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.

from timdeschryver.dev.

@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.

from timdeschryver.dev.

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

from timdeschryver.dev.

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

from timdeschryver.dev.

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.

from timdeschryver.dev.

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 :)

from timdeschryver.dev.

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.

from timdeschryver.dev.

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",

from timdeschryver.dev.

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?

from timdeschryver.dev.

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)">

from timdeschryver.dev.