Ionic Native Google Maps custom icon

Ionic Framework ionic-v3
1

I’m trying to configure custom icon (marker.png) for a google map marker using Ionic Native google maps, I’m trying that:

let markerOptions: GoogleMapsMarkerOptions = {
position: myPosition,
title: 'Estas aquí!',
icon: { url : 'img/marker.png' }
};

but it’s not working, what’s wrong?

marker.png image is under www/img folder.

2

i think you need to use the BitmapDescriptorFactory

see the example

3

mmm could be, but I’m trying to follow the instructions in the plugin page:

but using the ionic native google maps, that would implement the same…

4

can you provide some any plunker example

5

I understand that ionic native google maps only works on device.

My code looks like these:

private onPlatformReady(): void {
    try {
      Geolocation.getCurrentPosition().then((resp) => {

        // resp.coords.latitude - resp.coords.longitude
        let myPosition = new GoogleMapsLatLng(resp.coords.latitude, resp.coords.longitude);
        console.log("My position is", myPosition);

        GoogleMap.isAvailable().then(() => {

          this.map = new GoogleMap('map_canvas', { target: myPosition, zoom: 14 });

          this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {

            this.map.moveCamera({ target: myPosition, zoom: 14 });

            let markerOptions: GoogleMapsMarkerOptions = {
              position: myPosition,
              title: 'Estas aquí!',
              icon: { url : 'img/marker.png' },
              animation: GoogleMapsAnimation.BOUNCE
            };
           
            this.map.addMarker(markerOptions).then(
                (marker: GoogleMapsMarker) => {
                    marker.showInfoWindow();
                }
            );

          })
        });
      });
    } catch (error) {
      alert(error);
    }
  }
6

seems you are missing the devil

“,”

may i right
and also add the marker with your options i mean

this.map.addMarker(markerOptions);

7

Sorry, I tried to simplify my code and I make this mistakes, but I regret that this is not the problem. I will correct my previous post. Thank you

8

I am also facing same problem. My folder structure and code is as follows

src
–assets
----img
----markers
------map_icon.png
–pages
----map-page
------map-page.ts

code in map-page.ts as follows

var markerOption={
title: ‘Indiranagar Metro Station’,
position: new GoogleMapsLatLng(12.978265, 77.638852),
icon: {
url : ‘img/map_bicycle_count.png’
}
}

map.addMarker(markerOption)

Any suggestion.

10

Please try this stackoverflow solution, it has plunker inside

http://stackoverflow.com/questions/42598133/ionic-2-dynamic-markers-in-google-maps-with-profile-picture/42600327#42600327

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

  constructor(private latlng, map, private args) {
    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) => {
        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;
  }
}
11

This is for javascript API not for native API.

12

icon: ‘file:///android_asset/www/assets/markers/custom_icon.png’

This works for android. assets is standard ionic2 app dir, markers is custom subdir with icon files.

1 Like
13

Yeah but it works only for android, so I find this way

let markerOptions: MarkerOptions = {
            position: new LatLng(poiData.position.lat, poiData.position.lng),
            title: poiData.title,
            icon: {
                url: 'www/assets/markers/green.png'
            }
        };

I think it’s the www path missing in most of the cases that don’t work.

2 Likes
14

Try this, i work for me

onMarkerInit(coord: any) {

const image = {
  url: './assets/img/my_location.png',
  size: {
    width: 24,
    height: 24
  }
};

let markerOptions: MarkerOptions = {
  'position': new LatLng(coord.latitude, coord.longitude),
  'icon': image
};

this.map.addMarker(markerOptions);

}

8 Likes
15

Hello i try to customising a marker and i copy past the code above but i have problem with my ts lint in tow lines (3and 6)
and when i try to rendre it i have this problem "Uncaught (in promise): ReferenceError: google is not defined"
can you help me please

//line3
clickListener: google.maps.MapsEventListener;
//line 6   
super();

this is my issue Ionic Native costuming Google Maps Marker

16

For ionic 3, start the path to the markers with “assets/…”, like this:

let markerOptions: MarkerOptions = {
position: new LatLng(poiData.position.lat, poiData.position.lng),
title: poiData.title,
icon: {
url: ‘assets/markers/green.png’
}
};

4 Likes
17

This is the correct answer thx.

18

put it along with the assets within your angular files. if you’re using angular then do the whole

“…/…/…/assets/icon.png”