Custom marker for google maps


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, 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) {

  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;

      let point = this.getProjection().fromLatLngToDivPixel(this.latlng);
      if (point) { = (point.x - 50) + 'px'; = (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");


  remove() {
    if (this.marker) {
      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.


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


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


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


I import
<script async defer src="<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/";
import { MapService } from '../../shared/map/map.service';
import { CustomMarker } from '../../shared/map/custom.marker';

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

  constructor(private platform: Platform,
    private mapService: MapService) { 

  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
      } = 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>${}</span>`

    let marker = new google.maps.Marker({
      position: markerData,
      draggable: markerData.draggable

    // let marker = new CustomMarker(
    //   new google.maps.LatLng(, markerData.lng),
    //   {
    //     img: ''
    //   }
    // );



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


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