This component provides a Google Maps Angular component that implements the Google Maps JavaScript API. File any bugs against the angular/components repo.
To install, run ng add @angular/google-maps.
Follow these steps to get an API key that can be used to load Google Maps.
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.
GoogleMapMapMarkerMapInfoWindowMapPolylineMapPolygonMapRectangleMapCircleMapGroundOverlayMapKmlLayerMapTrafficLayerMapTransitLayerMapBicyclingLayerMapDirectionsRendererMapHeatmapLayer
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.