Ionic Native Google Maps custom icon

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.

i think you need to use the BitmapDescriptorFactory

see the example

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…

can you provide some any plunker example

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(() => {

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

 any) => {

  { target: myPosition, zoom: 14 });

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

    } catch (error) {

seems you are missing the devil


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

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

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


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’


Any suggestion.

Please try this stackoverflow solution, it has plunker inside

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

  constructor(private latlng, map, private args) {

  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) => {
        alert('You clicked on a custom marker!');
        google.maps.event.trigger(this, "click");


  remove() {
    if (this.marker) {
      this.marker = null;

  getPosition() {
    return this.latlng;

This is for javascript API not for native API.

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

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

let markerOptions: MarkerOptions = {
            position: new LatLng(, 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.


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



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

clickListener: google.maps.MapsEventListener;
//line 6   

this is my issue Ionic Native costuming Google Maps Marker

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

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


This is the correct answer thx.

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