Google map integration using google api in angular 12 example; In this tutorial, i am going to show you how to integrate google maps in Angular 12 Application.
Google Maps is a Web-based service that provides detailed information about geographical regions and sites around the world. In addition to conventional road maps, Google Maps offers aerial and satellite views of many places. In some cities, Google Maps offers street views comprising photographs taken from vehicles.
Angular 12 Integrate Google Maps Example Tutorial
Step 1 – Create New App
Execute the following command on terminal to create your angular app using bellow command:
ng new myNewApp
Then Open app.component.html
file and put the below html markup:
<div class="row mt-5"> <div class="col-md-9 mx-auto"> <h2 class="text-left">Google Map</h2> <div class="card mt-3"> <div class="card-body"> <div #mapRef style="width:100%;height:400px"></div> </div> </div> </div> </div>
Next, Open the app.component.ts
file and add the below code:
@ViewChild('mapRef', {static: true }) mapElement: ElementRef;
Access <div #mapRef>: mapElement is a reference to <div #mapRef> inside app.component.html file. ViewChild directive creates a direct link between <div> element and a mapElement member variable.
Step 2 – Loading the Maps JavaScript API
You need to load the Maps JavaScript API in the app.module.ts
file. If you don’t want to load it globally. You can create a new component and load it.
So, open the app.component.ts
file and put the below two methods on this:
renderMap() { window['initMap'] = () => { this.loadMap(); } if(!window.document.getElementById('google-map-script')) { var s = window.document.createElement("script"); s.id = "google-map-script"; s.type = "text/javascript"; s.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDRmqZ-1VD-DbsccElMGtMtlRz9FndbPB4&callback=initMap"; window.document.body.appendChild(s); } else { this.loadMap(); } }
loadMap = () => { var map = new window['google'].maps.Map(this.mapElement.nativeElement, { center: {lat: 24.5373, lng: 81.3042}, zoom: 8 }); var marker = new window['google'].maps.Marker({ position: {lat: 24.5373, lng: 81.3042}, map: map, title: 'Hello World!', draggable: true, animation: window['google'].maps.Animation.DROP, }); var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h3 id="thirdHeading" class="thirdHeading">laratutorials.com</h3>'+ '<div id="bodyContent">'+ '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'+ '</div>'+ '</div>'; var infowindow = new window['google'].maps.InfoWindow({ content: contentString }); marker.addListener('click', function() { infowindow.open(map, marker); });
In order to do any kind of interaction with the Maps API, you need an API key from Google. Follow the instructions here to get that set up. After the setup complete, You need to replace YOUR_API_KEY
with google map key.
You may noticed that, we have load the Google Maps JavaScript CDN
under the renderMap
method.
The renderMap
method will check that the Google Maps JavaScript CDN
is already loaded or not. If not then it will load the Google Maps JavaScript CDN
. If already loaded then will call the loadMap
method.
The loadMap
will draw the map.
Next, you will call the renderMap
method under ngOnInit
method. like this:
ngOnInit() { this.renderMap(); }
Angular will invoked the ngOnInit
only once when the directive is instantiated.
After above changes our app.component.ts
file will looks like this
import {AfterViewInit, Component, ElementRef, ViewChild, OnInit} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { @ViewChild('mapRef', {static: true }) mapElement: ElementRef; constructor() {}; ngOnInit() { this.renderMap(); } loadMap = () => { var map = new window['google'].maps.Map(this.mapElement.nativeElement, { center: {lat: 24.5373, lng: 81.3042}, zoom: 8 }); var marker = new window['google'].maps.Marker({ position: {lat: 24.5373, lng: 81.3042}, map: map, title: 'Hello World!', draggable: true, animation: window['google'].maps.Animation.DROP, }); var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h3 id="thirdHeading" class="thirdHeading">laratutorials.com</h3>'+ '<div id="bodyContent">'+ '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'+ '</div>'+ '</div>'; var infowindow = new window['google'].maps.InfoWindow({ content: contentString }); marker.addListener('click', function() { infowindow.open(map, marker); }); } renderMap() { window['initMap'] = () => { this.loadMap(); } if(!window.document.getElementById('google-map-script')) { var s = window.document.createElement("script"); s.id = "google-map-script"; s.type = "text/javascript"; s.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDRmqZ-1VD-DbsccElMGtMtlRz9FndbPB4&callback=initMap"; window.document.body.appendChild(s); } else { this.loadMap(); } }
Step 3 – Running application:
Run application using ng serve –o and you should see Google Maps inside browser. Congrats!! See, it was easy.