DEV Community

Cover image for Google Maps is now an Angular component

Google Maps is now an Angular component

Tim Deschryver on November 06, 2019

The new Angular Component pearl-lullaby (v9.0.0-rc.0) introduces the second official @angular/component component, a Google Maps component. In this...
Collapse
 
devpato profile image
Pato Angular •

What's the main difference between this and AGM?

Collapse
 
timdeschryver profile image
Tim Deschryver Angular •

I'm not very familiar with AGM.
Seems like they provide similar features, but with a slightly different API.
AGM also seems to have some extra libs to draw on the map - angular-maps.com/api-docs/.

Looking into the feature, I would guess that the official component will follow the Angular upgrade paths - whereas for AGM it might take some time to follow the Angular upgrades.

Collapse
 
devpato profile image
Pato Angular •

Awesome response number 2!! :) Yeah, AGM hasn't been updated in a year I believe

Thread Thread
 
iyashu5040 profile image
Iyashu5040 •

According to the @agm/core npm page, AGM came out of beta 2 months ago. So seems at least kind of active.

Thread Thread
 
devpato profile image
Pato Angular •

winning

Collapse
 
alexshev profile image
Alex Shev •

The official Angular wrapper lowers the setup cost, but it is still worth keeping map options and event handling close to the feature that owns them. That makes it easier to test marker and viewport changes without turning the map component into a global state container.

Collapse
 
gadrawingz profile image
Gad Iradufasha •

Great post... Anyways, Is Google Map available in React.js too?

Collapse
 
timdeschryver profile image
Tim Deschryver Angular •

I'm not following React as I am Angular, but AFAIK there is no "official react" google map component. I'm sure there's a 3rd party module that has a google map component tho, and if that's not the case you could write a wrapper around the google map api.

Collapse
 
devpato profile image
Pato Angular •

The API it is

Collapse
 
fancyfranci profile image
Franciska Perisa •

The ViewChild in the code after "As an example, we can log the current center of the map." seems to be the wrong one :)
Besides that: A very helpful article!

Collapse
 
jwp profile image
John Peters •

Tim... how would we incorporate a proxy to address CORS Restrictions?