Angular google map integration with Live Demo

Today we will learn how to integrate google map in your Angular 8 Application using this tutorial. In this angular google map integration tutorial, we would love to share each things step by step with example.

Before start integrating Google Map in your Angular 8 Application, We need a Angular 8 Project. If you don’t know how to create a new project. Follow this tutorial.

So, Let’s get started Angular google map integration

First, let’s add a placeholder for Google Map

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.

Next, Loading the Maps JavaScript API

I am going 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&amp;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">W3path.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, We will call the renderMap method under ngOnInit method. like this

ngOnInit() {
    this.renderMap();
}

Angular 8 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">W3path.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&amp;callback=initMap";
      
      window.document.body.appendChild(s);
    } else {
      this.loadMap();
    }
  }

}

Running application:

Run application using ng serve –o and you should see Google Map inside browser. Congrats!! See, it was easy.

4 Comments

  1. mike said:

    Great tutorial, any help on how to display polygons? Cheers

    January 13, 2020
    Reply
  2. sprzedam samochód said:

    Bardzo podoba mi się twoja strona. Dziękuję za świetne informacje i zapraszam na stronę o samochodach. Do zobaczenia! https://samocholand.pl/

    January 4, 2021
    Reply
  3. imipramine tablets said:

    My wife and i were very thrilled when Raymond managed to round up his web research with the precious recommendations he was given while using the weblog. It is now and again perplexing to simply possibly be releasing tips and tricks which usually the rest might have been trying to sell. We really understand we now have you to thank for this. Those illustrations you made, the straightforward website navigation, the relationships your site make it possible to promote – it is mostly wonderful, and it is making our son in addition to us understand this topic is thrilling, which is certainly wonderfully vital. Thanks for the whole thing! https://tofranilimipramine.com/#

    January 10, 2021
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *