ποΈ Working with Frameworks
To be approachable to a wide range of developers, this handbook purposefully contains vanilla Javascript/Typescript code snippets.
After all, around 40% of all websites still run on Wordpress where Javascript only gets sprinkled here and there.
And in the Javascript ecosystem, your favorite libraries/frameworks like React , Angular , Vue , or Svelte come nowhere close in widespread usage to good old jQuery and Boostrap .
Admittedly, the Javascript framework ecosystem is a bit of a mess. To make some sense of it, check out Fireship's videos on this topic .
Still, if you're developing a larger app, you will likely reach for a Javascript framework like Angular or a meta-framework like Next.js to ship faster and write more maintainable code.
In this chapter you'll learn how Google Maps client libraries for Angular and React can help abstract away some βvanilla Google Mapsβ verbosity and peculiarities. In the end, the client libraries should improve your developer experience and boost your implementation confidence.
There are practically two libraries to choose from β @agm/core and @angular/google-maps .
@agm/core, developed by Sebastian Holstein , is very popular but no longer maintained.
@angular/google-maps is developed by the official Angular team and has better support and maintenance.
Both libraries wrap around the Javascript Google Maps API via components and expose their bindings via @Inputs and @Outputs . Instead of manually creating Javascript instances via new google.maps.XYZ(), you will conveniently import the respective modules and interact with them in βidiomatic Angular.β
Most artifacts like Markers , Polygons , and InfoWindows are supported out of the box.
While @agm/core does offer a wrapper around the βοΈ Drawing library, @angular/google-maps does not.
It's also worth noting that neither package implements the StreetView API β there's an open PR for @angular/google-maps though.
That said, let's look at a typical Angular implementation of Google Maps.
In your Angular project (e.g. this stackblitz boilerplate ), run:
npm install @angular/google-mapsas a dependency and then:
npm install --save-dev @types/google.mapsas a dev dependency .
Note that @types/googlemaps is deprecated in favor of @types/google.maps .
Then, in your tsconfig.json , make sure to include the .d.ts declarations provided by the @types typings:
{
...
"include": ["src/**/*.d.ts"]
}Your Typescript compiler might still complain about:
Cannot find namespace 'google'.