Saturday, June 22, 2024
Angular7Google MapGoogle Map Api

Angular 7 Google Maps working example

Hello to all, welcome to In this post, I will tell you, Angular 7 Google Maps working example.

If you are new in Angular 7 then you can post related to Angular 7.

Google Map and Angular are both developed by Google and both are amazing and both are popular.

Here is the code snippet for Angular 7 Google Maps working example and please follow all the steps carefully:

1. Very first, you need to run below commands into your terminal to install fresh Angular 7  setup:

$ ng new angular7googlemaps //Install Angular setup

$ cd angular7googlemaps // Go inside Angular project

$ ng serve // execute angular

http://localhost:4200/ //run into your browser


2. Now add below code into your  app.component.ts file:

import { Component, OnInit } from '@angular/core';
declare var google;
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'angular7googlemaps';
  	 google.charts.load('current', {
        // Note: you will need to get a mapsApiKey for your project.
        // See:
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
            ['Regions', 'Popularity'],
            ['New York', 200],
            ['Texas', 500],
            ['California', 600]
         var options = {};
         options['region'] = 'US';
         options['resolution'] = 'provinces';
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
        chart.draw(data, options);



3. Now add below code into app.component.html file:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
    Welcome to {{ title }}!
   <div id="regions_div" style="width: 900px; height: 500px;"></div>


4. Now run ng serve command into your terminal and you will  see below error:

Oops, you will get ERROR ReferenceError: google is not defined error missing something so to over come to this error, need to run check 5th point.

5. Now add below script into your angular7googlemaps\src\index.html file:

<script type="text/javascript" src=""></script>


Now you are done, if you have any query related to this post, then please do comment or ask question.


Thank you

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

1 Comment

  • Nothing is visible, except “Welcome to angular7googlemaps!”, also there is no error.
    ps- I have used an unbilled account javascript API key, is that may be the problem??

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.