Simple Google Maps JS API integration with Angular.
A very very simple and stripped down integration of the Google Maps JS API and Angular.
<div>
in your DOM with an id
of your preference. We will put our map in that <div>
.vh
, vw
), etc, but NOT in percentage (%
) for both width and height.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! :)
<script>
from the GMJSAPI in my <head>
won't work?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.