google-maps web component support

[codingnuclei]

Feature Description

The Google maps team has announced web components for both the map and advanced marker functionality. With more to be added.

Announcement blog

It is currently in preview and available to use by appending "v=beta" (with some caveats like currently you must have a map-id).

Feature Request

Slim utility directives to aid in using these webcomponents in Angular.

Will help with:

• google-maps api loading (remove the need to use httpclient jsonp backend and simplify usage)
• Access to the webcomponent instance to be easily used with @ViewChild etc.
• Set google-map options like the current Angular component. Currently setting individual props is a pain with the web components.

Why?

From what I can tell from the source code the Angular Google Maps components are wrappers around the "native" Google maps api, abstracting the creation and adding an Angular sugar to the interactions (events, inputs).

• Using the web components removes the need for this creation abstraction, simplifying maintenance and code base.

• Angular natively already plays well with web components' events and prop binding.

I have already been playing around with this idea and it seems to work well.

If this is something the team thinks would be a good feature I will flesh out my work and post an example here.

I am also happy to take on this feature 😊

Use Case

A more easy plug and play experience with Google Maps webcomponents.

[Andrew7070]

https://github.com/angular/components/blob/main/src/google-maps/README.md The instructions at the url above seem out of date. For one am using Angular 17 and when the imports property is set to 'GoogleMap' as required here, there is error: "The component 'GoogleMap' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule." I had to use 'GoogleMapsModule'. Then after getting all set, the map does not load at all. Not even a flash. Thanks