A very very simple and stripped down integration of the Google Maps JS API and Angular.
- Create a gmap service and add the code provided in src/app/gmap.service.ts
- Import it in your component
- Define it in your constructor
- Create a
<div>in your DOM with anidof your preference. We will put our map in that<div>. - Style your div, so that it has a specific height and width. The height and width can be given in pixels, in viewport height/width units (
vh,vw), etc, but NOT in percentage (%) for both width and height. - You want to load your map after your view has been created, because you will be trying to access DOM elements (our div!). So, you will need to be implementing AfterViewInit.
- Ready to go! See it live
-
Maybe you don't want to install a new library to your project. You already know how to use the Google Maps JS API and you don't want to learn a new tool to do things you already know how to do.
-
The Google Maps JS API has an extended guide, reference, and samples, which should cover any use case. So, why use a library that wraps these (or some of these and not all)?
-
It's just a small script! :)
Because it is loaded asynchronously, and we don't know when it the maps object is loaded.
What we do here, is we add the script within the head tag and we add an event listener to it. Once the script is loaded, we call the window.google.maps object! :)
Essentially, we create a function that loads the script. In that function, we pass a callback function that will be called when the script is indeed loaded. Once the script is loaded, we can use the google maps object.
You can use this method to add any kind of scripts that add objects to the window asynchronously, eg. google analytics.
It is just a simpler and more secure way of integrating the Google Maps JS API in your Angular application.
Disclaimer: This project was generated with Angular CLI version 1.5.0.