javascript - add marker to the google maps in angular component - Stack Overflow

admin管理员组

文章数量:1420973

• I am trying to add marker to the google maps.
• but I am facing below error. InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama
• can you tell me how to fix it.
• providing code and stackblitz below.

/app/map-loader.ts

return MapLoader.load().then((gapi) => {
      this.map = new google.maps.Map(gmapElement.nativeElement, {
        center: new google.maps.LatLng(lat, lng),
        zoom: zoom,
        mapTypeId: type,
       // label: "A"
      });

      this.map1 = new google.maps.Marker({
        label: "A",
        position: { lat: 59.33555, lng: 18.029851 },
        map: map,
        title: 'Hello World!'
      });

      // let markerSimple = new google.maps.Marker({
      //   label: "A",
      //   position: { lat: 59.33555, lng: 18.029851 },
      //   map: map,
      //   title: 'Hello World!'
      // });
    });

• I am trying to add marker to the google maps.
• but I am facing below error. InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama
• can you tell me how to fix it.
• providing code and stackblitz below.

https://stackblitz./edit/angular-gmaps-api-suvdaf?file=src/app/map-loader.ts

return MapLoader.load().then((gapi) => {
      this.map = new google.maps.Map(gmapElement.nativeElement, {
        center: new google.maps.LatLng(lat, lng),
        zoom: zoom,
        mapTypeId: type,
       // label: "A"
      });

      this.map1 = new google.maps.Marker({
        label: "A",
        position: { lat: 59.33555, lng: 18.029851 },
        map: map,
        title: 'Hello World!'
      });

      // let markerSimple = new google.maps.Marker({
      //   label: "A",
      //   position: { lat: 59.33555, lng: 18.029851 },
      //   map: map,
      //   title: 'Hello World!'
      // });
    });

• javascript
• html
• css
• angular
• google-maps

Share Improve this question Follow asked Aug 30, 2018 at 17:30 user10296594user10296594 5

• possible duplicate of this stackoverflow./questions/33641663/… – Arun Kumar Commented Aug 30, 2018 at 17:35
• @ArunKumar hey thanks for your reply, I refered the code and updated but still I am facing issues, can you help me stackblitz./edit/angular-gmaps-api-5rmefe?file=src/app/… – user10296594 Commented Aug 30, 2018 at 17:59
• Markers code should be inside initialize function see this jsfiddle for reference jsfiddle/KvugB – Arun Kumar Commented Aug 30, 2018 at 18:43
• have you tried this library? angular-maps. i am using and is really easy and customizable. If you need an example let me know and i will add one – Daniel Torres Laserna Commented Aug 30, 2018 at 19:19
• @DanielTorresLaserna hey can you update in my stackblitz its so confusing :( – user10296594 Commented Aug 30, 2018 at 19:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

If i have understand your question this modified code will add markers

  import { Injectable } from '@angular/core';
  import { } from '@types/googlemaps';
  declare var window: any;


   // Credits to: Günter Zöchbauer
  // StackOverflow Post: https://stackoverflow./a/39331160/9687729

   @Injectable()
   export class MapLoader {

    private static promise;
    map: google.maps.Map;

    public static load() {
      if (!MapLoader.promise) { // load once
      MapLoader.promise = new Promise((resolve) => {
      window['__onGapiLoaded'] = (ev) => {
        console.log('gapi loaded')
        resolve(window.gapi);
     }
      console.log('loading..')
      const node = document.createElement('script');
      node.src = 'https://maps.googleapis./maps/api/js?callback=__onGapiLoaded';
      node.type = 'text/javascript';
      document.getElementsByTagName('head')[0].appendChild(node);
    });
  }

  return MapLoader.promise;
}

   initMap(gmapElement, lat, lng, zoom, type) {

     return MapLoader.load().then((gapi) => {
       this.map = new google.maps.Map(gmapElement.nativeElement, {
       center: new google.maps.LatLng(lat, lng),
       zoom: zoom,
       mapTypeId: type,
       // label: "A"
     });
       //after map load add markers
        this.createMarker();
   });
 }

  createMarker() {

     // list of hardcoded positions markers 
      var myLatLngList = {
          myLatLng : [{ lat: 37.76487, lng: -122.41948 }, { lat: 59.33555, lng: 18.029851 }]    
          };

         //iterate latLng and add markers 
        for(const data of myLatLngList.myLatLng){
          var marker = new google.maps.Marker({
              position: data,
              map: this.map,
              title: 'markers'
          });
       }
  };
}

本文标签： javascriptadd marker to the google maps in angular componentStack Overflow