How to Use Google Maps in Angular 2

Question

I want to use Google Maps in my project based in Angular 2. I tried to implement code from here, but I get this error:

ReferenceError: initMap is not defined

The below Angular 2 code and page show like pop.. but i don't know how to use initMap() function in my Angular 2 method.

           'use strict';
    const angular = require('angular');

    import * as properties from '../../../properties';
    import { ReadableAddress, setCorrectPhotoPath } from '../../../Utility/Utility';
    export default class ListComponent {
      /*@ngInject*/
      constructor($http, $scope, $location) {
        var me = this;
        this.$scope = $scope;
        this.$http = $http;

        this.$location = $location;

        }
  initMap() {
         var myLatLng = {
           lat: -25.363,
           lng: 131.044
         };

         var map = new google.maps.Map(document.getElementById('map'), {
           zoom: 4,
           center: myLatLng
         });

         var marker = new google.maps.Marker({
           position: myLatLng,
           map: map,
           title: 'Hello World!'
         });
       }         


       setLocation(mylocation) {


            this.openComponentModalLocation();
          }
  ngOnInit() {
         this.initMap();  /* Use "this" here. */
       }
     openComponentModalLocation() {
        var modalInstance = this.$uibModal.open({
          animation: this.animationsEnabled,
          template: require('../show/location.html'),
          scope: this.$scope,
          size: 'lg'
        });
        this.$scope.modalInstance = modalInstance;
        return modalInstance.result;
      }

where i enter this below api code..in angularjs

    <div class="modal-header">   
        <h4 class="job_header">Location</h4>
    </div>
    <div class="modal-body" id="modal-body">
        <section class="panel">
            <header class="panel-heading">
                <h2 class="panel-title">Engineer Location</h2>
            </header>
             <style>    
          #map {
            height: 100%;
          }    

        </style>
            <div class="panel-body">
                 <div id="map"></div>
            </div>
        </section>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
    </div>
    <div class="modal-footer">

</div>

Possible duplicate of [Google maps with angular](http://stackoverflow.com/questions/34254687/google-maps-with-angular) — AndreaM16, Jan 18 '17 at 14:01

IzumiSy · Accepted Answer · 2017-01-18T14:18:46.707

2

That's because initMap function is not defined as a member function of ListComponent class.

   export default class ListComponent {
       /*@ngInject*/
       constructor($http, $scope, $location) {
           var me = this;
           this.$scope = $scope;
           this.$http = $http;

           this.$location = $location;
       }

       /* Define function as a member */
       initMap() {
         var myLatLng = {
           lat: -25.363,
           lng: 131.044
         };

         var map = new google.maps.Map(document.getElementById('map'), {
           zoom: 4,
           center: myLatLng
         });

         var marker = new google.maps.Marker({
           position: myLatLng,
           map: map,
           title: 'Hello World!'
         });
       }         

       setLocation(mylocation) {
           this.initMap();  /* Use "this" here. */ 
           this.openComponentModalLocation();
       }

       openComponentModalLocation() {
           var modalInstance = this.$uibModal.open({
               animation: this.animationsEnabled,
               template: require('../show/location.html'),
               scope: this.$scope,
               size: 'lg'
           });
           this.$scope.modalInstance = modalInstance;
           return modalInstance.result;
       }
   }

edited Jan 18 '17 at 14:18

answered Jan 18 '17 at 13:21

IzumiSy

1,508
9
17

thanks for your answer but its show error...ReferenceError: google is not defined – Addi Khan Jan 18 '17 at 13:24
where i enter src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> in html page...i add my html page – Addi Khan Jan 18 '17 at 13:25
Do you have api key to use Google API? You need to replace the part of `YOUR_API_KEY` with your own one in the URL. If not, you can get it in Google API Console. – IzumiSy Jan 18 '17 at 13:27
yes i have key but its show error...ReferenceError: google is not defined – Addi Khan Jan 18 '17 at 13:27
Ok then the problem would be the timing of loading Google API sdk. How about defining `ngOnInit` function as a member of your class in order to wait the loading of sdk. – IzumiSy Jan 18 '17 at 13:29
i am new in angular please show as answer i can understand – Addi Khan Jan 18 '17 at 13:31
Ok here is an another possible solution: remove `defer` and `async` – IzumiSy Jan 18 '17 at 13:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133452/discussion-between-izumisy-and-addi-khan). – IzumiSy Jan 18 '17 at 13:41

How to Use Google Maps in Angular 2

1 Answers1