Angular 12/11 Google Maps Integration Tutorial Example

Google map integration using google api in angular 11/12 app tutorial. In this example, you will learn how to integrate google maps in Your Angular 11/12 Application without using any library or plugin. In this angular google maps integration tutorial would love to share each things step by step with example.

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/11 Google Maps Example Tutorial

• Step 1 – Create New Angular App
• Step 2 – Add Map Html in app.component.html
• Step 3 – Get Maps API Key
• Step 4 – Import Modules on App.module.ts
• Step 5 – Start Angular APP

Step 1 – Create New Angular App

Execute the following command on terminal to create your angular app using bellow command:

ng new myNewApp

Step 2 – Add Map Html in app.component.html

Then Open app.component.html file and add following HTML markup on it:

<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>

Step 3 – Get Maps API Key

In this step, you need to get google api key; So, first, you have to have the Maps API Key, and you can go here to get the complete instructions.

Step 4 – Add Map Html in app.component.ts

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">tutsmake.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 5 – Start Angular APP

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

Recommended Angular Tutorials