Custom marker for google maps

Ionic Framework ionic-v3
1

I want to implement custom marker for google maps in ionic2, default markers works but I need to style them and add profile picture.
I found https://stackoverflow.com/questions/42598133/ionic-2-dynamic-markers-in-google-maps-with-profile-picture, it’s exactly what I need, so I created a create a CustomMarker class

export class CustomMarker extends google.maps.OverlayView {
  marker: any;
  clickListener: google.maps.MapsEventListener;

  constructor(private latlng: any, map: any, private args: any) {
    super();
    this.setMap(map);
  }

  draw() {
    const panes = this.getPanes();
    let marker = this.marker;

    if (!marker) {
      marker = this.marker = document.createElement('div');
      marker.className = 'marker';

      let img = document.createElement('img');
      img.src = this.args.img;
      marker.appendChild(img);

      let point = this.getProjection().fromLatLngToDivPixel(this.latlng);
      if (point) {
        marker.style.left = (point.x - 50) + 'px';
        marker.style.top = (point.y - 50) + 'px';
      }

      this.clickListener = google.maps.event.addDomListener(marker, "click", (event: any) => {
        alert('You clicked on a custom marker!');
        google.maps.event.trigger(this, "click");
      });

      panes.overlayImage.appendChild(marker);
    }
  }

  remove() {
    if (this.marker) {
      this.marker.parentNode.removeChild(this.marker);
      this.clickListener.remove();
      this.marker = null;
    }
  }

  getPosition() {
    return this.latlng;
  }
}

and there isn’t any error, but when I run ionic serve or build I get following error: ReferenceError: google is not defined.
I also tried to add

declare let google: any;

on top but then I’m getting error for the super(),
[ts] Supplied parameters do not match any signature of call target.

2

How did you implement your Google Map? Used Ionic Native or a Cordova plugin directly? JS library?

3

I’m using JS library and also added @types/googlemaps

4

Provide more information please, a link and best some code of how you currently display the map in general.

5

I import
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=<API_KEY>"></script>
at the end of index.html
this code works (I removed some parts from it but kept the relevant ones)

import { Component, ViewChild, ElementRef } from '@angular/core'
import { Platform } from 'ionic-angular';
import { Geoposition } from '@ionic-native/geolocation';
import { mapStyle } from "../../shared/map/map.style";
import { MapService } from '../../shared/map/map.service';
import { CustomMarker } from '../../shared/map/custom.marker';

@Component({
  selector: 'map',
  templateUrl: 'map.html'
})
export class MapPage {
  @ViewChild('mapCanvas') mapElement: ElementRef;
  map: any;
  markers: any[] = [];

  constructor(private platform: Platform,
    private mapService: MapService) { 
      this.loadMap();
  }

  loadMap() {
    this.mapService.getCurrentPosition().then((position: Geoposition) => {
      this.mapService.position = position;

      let mapEle = this.mapElement.nativeElement;

      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      let mapOptions = {
        center: latLng,
        zoom: 15,
        styles: mapStyle,
        disableDefaultUI: true,
        scaleControl: false,
        scrollwheel: false,
        navigationControl: false,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      this.map = new google.maps.Map(mapEle, mapOptions);

	  this.addMarker({ name: 'My Location', lat: position.coords.latitude, lng: position.coords.longitude, draggable: true });
    }, (error) => {
      console.log(`Error getting current location: ${error}`);
    });
  }
  
  // Adds a marker to the map and push to the array.
  addMarker(markerData: any) {
    let infoWindow = new google.maps.InfoWindow({
      content: `<span>${markerData.name}</span>`
    });

    let marker = new google.maps.Marker({
      position: markerData,
      map: this.map,
      title: markerData.name,
      draggable: markerData.draggable
    });

    // let marker = new CustomMarker(
    //   new google.maps.LatLng(markerData.lat, markerData.lng),
    //   this.map,
    //   {
    //     img: 'http://placekitten.com/90/90'
    //   }
    // );

    this.markers.push(marker);
  }

}

but when I replace default google maps marker with custom marker, you can look at the addMarker(), then I get error: ReferenceError: google is not defined in CustomMarker class

6

does anybody have idea how I could solve the issue? :slight_smile: