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

AndreaM16
– AndreaM16

2017-01-18 14:01:36 +00:00
Commented Jan 18, 2017 at 14:01 — AndreaM16
– AndreaM16, Commented Jan 18, 2017 at 14:01

IzumiSy · Accepted Answer · 2017-01-18 14:18:46Z

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, 2017 at 14:18

answered Jan 18, 2017 at 13:21

IzumiSy

1,51810 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Addi Khan Over a year ago

thanks for your answer but its show error...ReferenceError: google is not defined

Addi Khan Over a year ago

where i enter src="maps.googleapis.com/maps/api/…"> in html page...i add my html page

IzumiSy Over a year ago

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.

Addi Khan Over a year ago

yes i have key but its show error...ReferenceError: google is not defined

IzumiSy Over a year ago

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.

|

Collectives™ on Stack Overflow

How to Use Google Maps in Angular 2

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related