CODEWITHSUNDEEP
angulargoogle-mapsangular-material
Winthorpe
Winthorpe

Reputation: 1200

Problem opening infoWindow in @angular/google-maps map

I am hitting a problem trying to open the infoWindow in an @angular/google-maps control (part of angular/components).

I have followed a tutorial as a first time user of this new functionality. My setup is slightly different than in the tuturial. I want to set just one marker and one infoWindow - rather than an array of markers.

I have setup a google-map control like this:

      <google-map height="500px" width="100%" [zoom]="zoom" [center]="marker.position" [options]="options">
        <map-marker #markerElement [position]="marker.position" (mapClick)="openInfo(markerElement)">
          <map-info-window>MyContent</map-info-window>
        </map-marker>
        <!-- <map-info-window>MyContent</map-info-window> -->
      </google-map>

(You can see from the commented out code in the above, that I have tried the placing of the infoWindow inside and outside the marker. Neither has solved the problem and I do not know which is best...)

And here is the relevant component Typescript:

  @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow

  marker;
  zoom = 8;
  options: google.maps.MapOptions = {
    mapTypeId: 'terrain'
  }

  openInfo(marker: MapMarker) {
    console.log(marker);
    console.log(marker.position);
    this.infoWindow.open(marker);
  }

  addMarker() {
    this.marker = ({
      position: {
        lat: this.observation.locationLatitude,
        lng: this.observation.locationLongitude
      },
      label: {
        color: 'red',
        text: 'Marker label',
      },
      title: 'Marker title',
      options: { animation: google.maps.Animation.BOUNCE },
    })
  }

The openInfo(marker: MapMarker) method is the most relevant bit, I think.

The (mapClick)="openInfo(markerElement)" event is correctly sent from the map control. It logs in the console the 'marker' object. However, it raises an error rather than opening the infoWindow.

The error is:

enter image description here

The error ('anchor.getAnchor is not a function') is raised on the this.infoWindow.open(marker); method. I have also tried it without an argument like this: this.infoWindow.open();.

The API documentation is here, and I have attached a screenshot of the relevant section:

enter image description here

I just cannot workout how to get it to work. I might be missing the woods from the trees, but can anyone point me in the right direction?

Upvotes: 2

Views: 3238

Answers (1)

Supun De Silva
Supun De Silva

Reputation: 1487

k Got it to work. DISCLAIMER - Cleaning required

Official docs : https://github.com/angular/components/tree/master/src/google-maps

1. I created a service to get my browser loc injected

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BrowserLocationService {

  constructor() { }

  public getPosition(): Promise<any> {
    return new Promise((resolve, reject) => {

      navigator.geolocation.getCurrentPosition(resp => {

          resolve({lng: resp.coords.longitude, lat: resp.coords.latitude});
        },
        err => {
          reject(err);
        });
    });

  }
}

Rest was simply following this and some naming foo

https://github.com/angular/components/blob/master/src/google-maps/map-info-window/README.md

2. Component

import { Component, ViewChild } from '@angular/core';
import { GoogleMap, MapInfoWindow, MapMarker } from '@angular/google-maps';
import { BrowserLocationService } from './browser-location.service';

declare var google: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow;
  @ViewChild(GoogleMap, { static: false }) map: GoogleMap;

  browserLatLng: any = null;
  defaultMarker: any = null;
  zoom = 8;
  options: google.maps.MapOptions = {mapTypeId: 'terrain'};

  constructor(private locSvc: BrowserLocationService) {
    this.locSvc.getPosition().then(
      loc =>  {
        console.log(this.browserLatLng);
        this.browserLatLng = loc;
        this.addDefaultMarker();
      });
  }

  openInfo(marker: MapMarker) {
    this.infoWindow.open(marker);
  }

  addDefaultMarker() {
    this.defaultMarker = ({
      position: {
        lat: this.browserLatLng.lat,
        lng: this.browserLatLng.lng
      },
      label: {
        color: 'red',
        text: 'Marker label',
      },
      title: 'Marker title',
      options: { animation: google.maps.Animation.BOUNCE },
    });
  }
}

3. HTML

<google-map height="500px" width="100%" [zoom]="zoom" [center]="defaultMarker?.position" [options]="options">
  <map-marker *ngIf="defaultMarker != null" #marker="mapMarker" [position]="defaultMarker?.position" (mapClick)="openInfo(marker)">
  </map-marker>
  <map-info-window>MyContent</map-info-window>
</google-map>

#marker="mapMarker" had something to do with it

Upvotes: 2

Related Questions