CODEWITHSUNDEEP
angulargoogle-maps
volna
volna

Reputation: 2610

Infowindow - Cannot read property 'open' of undefined

I am trying to implement google-maps inside angular.io component, it works fine, besides the infowindow object seems no beeing implemented property.

Can you please suggest what's been done wrong?

External imports

import { Component, OnInit } from '@angular/core';
import GoogleStyes from './google.styles';
import GoogleMap from 'google-maps';

Component

@Component({
  selector: 'app-map',
  template: '<div id="map"></div>',
  styleUrls: ['./map.component.scss']
})

export class MapComponent implements OnInit {

  constructor() { }

  //------------------------------------
  // Variables
  //------------------------------------

  map:object;
  center:object = { lat: 41.378842, lng: 2.182331 };

  marker:object;
  infowindow:object;;
  markerInfo:string = "<div>Hello</div>"



  //------------------------------------
  // Initializing Goolge Maps
  //------------------------------------

  ngOnInit() {

    GoogleMap.load((google, infowindow) => {
      this.map = new google.maps.Map(document.getElementById('map'), {
        center: this.center,
      });

      this.infowindow = new google.maps.InfoWindow({
        content: this.markerInfo
      });

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

      google.maps.event.addListener(this.marker, 'click', () => {
        infowindow.open(this.map, this.marker);
      });
    });
  }
}

Error

polyfills.bundle.js:100455 Uncaught TypeError: Cannot read property 'open' of undefined
    at _.Le.<anonymous> (main.bundle.js:1173)
    at Object._.A.trigger (js?callback=__google_maps_api_provider_initializator__:102)
    at DU.handleEvent (marker.js:50)
    at ly._.k.de (map.js:46)
    at ly._.k.Ki (map.js:44)
    at Object._.A.trigger (js?callback=__google_maps_api_provider_initializator__:102)
    at jq.<anonymous> (common.js:135)
    at Object._.A.trigger (js?callback=__google_maps_api_provider_initializator__:102)
    at jq._.k.Wi (common.js:197)
    at HTMLDivElement.<anonymous> (js?callback=__google_maps_api_provider_initializator__:39)

​

Upvotes: 0

Views: 1847

Answers (1)

QoP
QoP

Reputation: 28397

There is no infowindow object in GoogleMap.load((google) => {...}), just google.

You have defined an infowindow object here

this.infowindow = new google.maps.InfoWindow({
        content: this.markerInfo
});

just use it

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

this.marker.addListener('click', () => {
        this.infowindow.open(this.map, this.marker);
});

and it should work as expected.

Upvotes: 1

Related Questions