Status Quo

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.

<aside> 💡 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.

</aside>

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.

Google Maps with Angular

Your options

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.