Skip to content

Latest commit

 

History

History
88 lines (66 loc) · 3.55 KB

README.md

File metadata and controls

88 lines (66 loc) · 3.55 KB

Angular Google Maps component

This component provides a Google Maps Angular component that implements the Google Maps JavaScript API. File any bugs against the angular/components repo.

Installation

To install, run ng add @angular/google-maps.

Getting the API Key

Follow these steps to get an API key that can be used to load Google Maps.

Loading the API

Include the Dynamic Library Import script in the index.html of your app. When a Google Map is being rendered, it'll use the Dynamic Import API to load the necessary JavaScript automatically.

<!-- index.html -->
<!DOCTYPE html>
<body>
  ...
  <script>
    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
      v: "weekly",
      key: YOUR_API_KEY_GOES_HERE
    });
  </script>
</body>
</html>

Note: the component also supports loading the API using the legacy script tag, however it isn't recommended because it requires all of the Google Maps JavaScript to be loaded up-front, even if it isn't used.

Components

Services

The Options Input

The Google Maps components implement all of the options for their respective objects from the Google Maps JavaScript API through an options input, but they also have specific inputs for some of the most common options. For example, the Google Maps component could have its options set either in with a google.maps.MapOptions object:

<google-map [options]="options" />
options: google.maps.MapOptions = {
  center: {lat: 40, lng: -20},
  zoom: 4
};

It can also have individual options set for some of the most common options:

<google-map [center]="center" [zoom]="zoom" />
center: google.maps.LatLngLiteral = {lat: 40, lng: -20};
zoom = 4;

Not every option has its own input. See the API for each component to see if the option has a dedicated input or if it should be set in the options input.