Add icon to marker

[francoro]

In the version 1.4 of the plugin i added the marker like this:

let markerOptions = {
      position: latlng,
      disableAutoPan: true,
      icon: {
          url: "./assets/marker-imagen/marker.png",
          size: {
          width: 47,
          height: 60
        }
      }
 };               
const marker: Marker = map.addMarker(markerOptions).then((marker: Marker) => {})

Now in the v2 it seems that is not working. I tried with the setIcon() method this is my code:

const marker: Marker = map.addMarker(markerOptions)
                            .then((marker: Marker) => {
                                let iconData: MarkerIcon = "./assets/marker-imagen/marker.png";
                                marker.setIcon(iconData);
})

But i have this error in the VS code Type '"./assets/marker-imagen/marker.png"' has no properties in common with type 'MarkerIcon'.

Do you know how is the correct way to add an icon in the marker?

[wf9a5m75]

You can create a marker as the same as v1.

But I haven't checked the ionic wrapper version. There are many mistakes. I have been checking all methods one by one.

[francoro]

Okay. I have another issue maybe you know the answer. I enter the view of the map for the first time and shows me gray div but the code with markers is loaded and the html too. but then i go back and reenter again and it works.

[wf9a5m75]

Could you take a screen record (video)?

[francoro]

Just happen in a old phone now it doesnt happen anymore so no worries

[wf9a5m75]

OK, I guess the native API takes longer time than new phone to load the map tiles.

Any other questions?

[francoro]

The icon works when i do $> ionic build android with $>ionic run android.

I think it has a different folder for the assets the only problem was that it shows to big and it doenst work the width and heigth:

icon: {
    url: "assets/marker-imagen/marker.png",
    size: {
         width: 47,
         height: 60
     }
 }
const marker = map.addMarker(markerOptions)
                            .then((marker) => { })

Is there a different way to set the width and height in the v2?

[wf9a5m75]

Do you mean the size property does not work correctly?

[francoro]

Exactly

[wf9a5m75]

Okay. I'm working on another issue right now. But I will test the size property issue in today. Please wait for a while. Maybe try tomorrow please (I don't know where you are in the world though).

[francoro]

Ok great no hurries, i am from Argentina by the way.

[wf9a5m75]

I tested using the JS version with this code, and it worked perfectly.

var map = plugin.google.maps.Map.getMap(div);
map.one(plugin.google.maps.event.MAP_READY, function() {

  map.addMarker({
    'position': {
      lat: 0,
      lng: 0
    },
    icon: {
      url: "../images/number 1-icon.png",
      size: {
        width: 60,
        height: 60
      }
    }
  });
});

[ryanhalley]

I am having issues with icon urls this on Android (maybe iOS too), with v2beta 3. If I create a map with markers, and set the icon url, the map will appear and show the correct icons, but, creating further map instances will then fail. As soon as I comment out the url property, I have no problem creating new map instances; there is a good chance this is related to some general issues with the ionic plugin, as I've raised another ticket to do with creating the third of three map instances not rendering correctly (ticket 1629).

[wf9a5m75]

@ryanhalley Before posting your question, you should try the latest version. cordova-plugin-googlemaps 2.0.0-beta3-20170805-2349 is old.

[wf9a5m75]

And you should show me the code. Otherwise, I ignore your comment, because I don't have enough information, so I can not help you.

[ryanhalley]

I'll try the latest build, thanks.

                            icon: {
                                url: 'www/assets/img/map_icon.png'
                                size: {
                                    width: 10,
                                    height: 12
                                }
                            },

[ryanhalley]

With that enabled (on this old build), I can create the map with the markers, then destroy the page, and if I recreate the page it won't render.

[wf9a5m75]

In v2, you don't need to add www

[wf9a5m75]

If you want to help me, you need to create an example app. Otherwise, no help.

[ryanhalley]

Thanks - I tried the latest build, no change though. I'll work on an example tomorrow, cheers.

[ryanhalley]

Hi, I've replicated the issue - example below. I've emailed you the two icons.

Scenarios:

1. Map with 1 marker not using an icon url: loads fine.
2. Map with 100 marks not using an icon url: loads fine.
3. Map with 1 marker using an icon url; loads fine.
4. Map with 2 or more markers using the same icon url - one of two outcomes occur:
   • the map may load correctly and render all markers, but if you leave the page and reload it, the map will not render. All future map loads will not render.
   • the may will not load correctly, and you will see only the bottom 1cm of the map, moved to the top of the screen. All future map loads will not render.

I access the page via: this._navController.push(FindMapPage);

<ion-header>
    <ion-navbar>
        <ion-title>Map</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <div #map id="map" style="height: 100%;">
    </div>
</ion-content>

import { Component } from '@angular/core';
import {
    GoogleMaps,
    GoogleMap,
    GoogleMapsEvent,
    LatLng,
    CameraPosition,
    MarkerOptions,
    Marker
} from '@ionic-native/google-maps';

@Component({
    templateUrl: 'findMap.html',
    selector: 'findMap'
})
export class FindMapPage {
    private _map: GoogleMap;
    private _lat: number;
    private _lng: number;

    constructor(
        private googleMaps: GoogleMaps
        // private _navController: NavController,
    ) {

    }

    // Load map only after view is initialized
    ngAfterViewInit() {
        this.loadMap();
    }

    public ionViewWillLeave() {
        this._map.remove();
    }

    loadMap() {
        // create a new map by passing HTMLElement
        let element: HTMLElement = document.getElementById('map');

        this._lat = 50.730502;
        this._lng = -1.984551;

        let cameraPosition: CameraPosition = {
            target: {
                lat: this._lat,
                lng: this._lng
            },
            zoom: 18,
            bearing: 0
        };
        let mapOptions = {
            controls: {
                compass: true,
                myLocationButton: true,
                indoorPicker: true,
                zoom: true
            },
            gestures: {
                scroll: true,
                tilt: true,
                rotate: true,
                zoom: true
            },
            camera: cameraPosition
        };

        this._map = this.googleMaps.create(element, mapOptions);

        this._map.one(GoogleMapsEvent.MAP_READY).then(
            () => {
                console.log('Map is ready!');
                // Now you can add elements to the map like the marker
                this.addMarkers();
            }
        );

    }

    private addMarkers() {
        let lngCurrent = this._lng;
        // Icons only work if there is 1 instance of them
        let numberOfMarkers = 1;

        for (let x = 0; x < numberOfMarkers; x++) {
            // Move each successive marker a little
            lngCurrent += 0.0002;

            let markerOptions: MarkerOptions = {
                position: {
                    lat: this._lat,
                    lng: lngCurrent
                },
                icon: {
                    // Note: If the page does not render correctly, I have to quit: 'ionic cordova run android -cl'
                    // , otherwise, auto-rebuilding on file saves will not render the map correctly in future builds

                    // 1. With no url, the page renders.

                    // 2. Using this url will incorrectly render the map, showing only the bottom 1cm, but moved to the top of the screen
                    url: 'www/assets/img/map_icon_a.png',

                    // 3. Using this url will render the map once correctly, but if you leave the page and reload it, map is blank.
                    // url: 'www/assets/img/map_icon_b.png',
                    size: {
                        width: 10,
                        height: 12
                    }
                },
                title: x.toString(),
                snippet: x.toString()
            };

            this._map.addMarker(markerOptions)
                .then(addedMarker => {
                });
        }
    }

}

[wf9a5m75]

Please share your code on github

[wf9a5m75]

And as I answered before DO NOT attach www in the path of icon image file.

[wf9a5m75]

And as I describe here, you should not use the ngAfterViewInit.

  constructor(private googleMaps: GoogleMaps, public platform: Platform) {

    // Wait the native plugin is ready.
    platform.ready().then(() => {
      this.loadMap();
    });
  }

  // Don't use the ngAfterViewInit(). The native plugin is not ready.
  //ngAfterViewInit() {
  // this.loadMap();
  //}

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/tree/master/v2.0.0/ionic-native#usage

Or just simply wrap with setTimeout()

let self = this;
setTimeout(function() {
  self.loadMap();
}, 500);

[ryanhalley]

Thanks for the feedback, here are my updates.

• I removed 'www/' prefix but no custom icons are then visible, the default loads instead; I have had to re-add it for now, just to proceed with testing.
• I only used ngAfterViewInit, because it was in the example template I grabbed here, I forgot to check it needed updating as per your previous advice: https://ionicframework.com/docs/native/google-maps/ -- I used your platform.ready example, but I then only see a blank map. -- I tried the setTimeout example within an ionViewDidEnter(), and that displays the map, but all of the original issues remain the same (i.e with the 'www/' prefix, otherwise I see only the default icon).

[ryanhalley]

Here are my plugins again, in case they have changed: com.telerik.plugins.nativepagetransitions 0.6.5 "Native Page Transitions" com.xmartlabs.cordova.market 1.1 "Market" cordova-custom-config 3.2.0 "cordova-custom-config" cordova-plugin-actionsheet 2.3.3 "ActionSheet" cordova-plugin-app-name 1.0.0 "App Namer" cordova-plugin-app-version 0.1.9 "AppVersion" cordova-plugin-camera 2.4.1 "Camera" cordova-plugin-compat 1.1.0 "Compat" cordova-plugin-console 1.0.6 "Console" cordova-plugin-contacts 2.3.0 "Contacts" cordova-plugin-device 1.1.5 "Device" cordova-plugin-email 1.2.6 "EmailComposer" cordova-plugin-geolocation 2.4.2 "Geolocation" cordova-plugin-google-analytics 1.6.0 "Google Universal Analytics Plugin" cordova-plugin-googlemaps 2.0.0-beta3-20170808-2240 "cordova-plugin-googlemaps" cordova-plugin-inapppurchase 1.1.0 "In App Purchase" cordova-plugin-network-information 1.3.2 "Network Information" cordova-plugin-splashscreen 4.0.2 "Splashscreen" cordova-plugin-statusbar 2.2.2 "StatusBar" cordova-plugin-vibration 2.1.5 "Vibration" cordova-plugin-whitelist 1.3.2 "Whitelist" cordova-plugin-x-socialsharing 5.1.6 "SocialSharing" cordova-sqlite-storage 1.5.3 "Cordova sqlite storage plugin" ionic-plugin-keyboard 2.2.1 "Keyboard" phonegap-plugin-push 1.10.5 "PushPlugin" uk.co.workingedge.phonegap.plugin.launchnavigator 3.2.2 "Launch Navigator"

[wf9a5m75]

Okay, please share your project files (not HTML and image files) on github. Please(x3) do not send as zip file.

[ryanhalley]

OK, thanks, will do.

[wf9a5m75]

Thank you.

[ryanhalley]

Hi, project added here: https://github.com/ryanhalley/googlemapsiconurl.git

[wf9a5m75]

@ryanhalley Let me confirm one thing, do you run your app with $> ionic cordova run android(or ios) -l, don't you?

[ryanhalley]

ionic cordova run android -cl

[wf9a5m75]

@ryanhalley I fixed both bugs,

• map is not displayed after coming back from another page,
• and icon is not displayed especially on live loading.

Please reinstall the latest version.

[wf9a5m75]

By the way, changing the background color is https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/class/Environment/setBackgroundColor/README.md

[ryanhalley]

Thank you - both bugs confirmed as fixed with livereload, and in release builds! Also, thanks for the setBackgroundColor tip!

There is one last niggling glitch relating to livereload only which I'll mention, since you've already touched on it. If you are using livereload and you have a map open, and then save a change to the code, when the app reloads it fails to render the first created map about 50% of the time, until you leave the page and reopen it, (until your latest fix, that previously would not fix it, but now it does). It's as if there is some cleanup which needs to be done during the reload, similar to the fix you added. If are you able to make it always work immediately after a livereload, then the development process will be 100% painless.

Finally, you have been very helpful, thank you very much for these fixes!

[francoro]

You wf9a5m75 put me this above. i dont understand. You can mix the JS version with the native? The JS version is when start with plugin.google.maps right? I can use that in angular 4 and VS code? because the type checker of typescript didnt let you put plugin.google.maps without import something.

or you can add the marker with JS version and still use the native map? I am using ionic but i have no problem in use it without the wrapper, but i want the native map solution for size width and height.

I tested using the JS version with this code, and it worked perfectly.

var map = plugin.google.maps.Map.getMap(div);
map.one(plugin.google.maps.event.MAP_READY, function() {

map.addMarker({
    'position': {
      lat: 0,
      lng: 0
    },
    icon: {
      url: "../images/number 1-icon.png",
      size: {
        width: 60,
        height: 60
      }
    }
  });
});

[wf9a5m75]

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/ionic-native/README.md

[francoro]

The example in that link doesn't use icon: { size: {width;, height:}}. i am triyng without the ionic wrapper and still shows the icons to Big giants would say. This is my code:

let markerOptions = {
    position: latlng,
    data: locations[i].id,
    disableAutoPan: true,
    icon: {
          url: "assets/marker-imagen/marker.png",
          size: {
             width: 47,
             height: 60
          }
      }                 
};
const marker = map.addMarker(markerOptions)
                            .then((marker) => {
                            })

[wf9a5m75]

[wf9a5m75]

Here is iOS demo.

[francoro]

Its working now. Thanks

[chrillewoodz]

I too must add www at the beginning or it simply doesn't work.

[JayanthkumarJK]

let targetLocation = new LatLng("your latitute", "your longitude");

    //code for marker and icon 

    let markerOption: MarkerOptions = {
      position: targetLocation,
      title: "if u want any title to display",  
      icon: {
        url: "ex: assests/img/youricon",
        size: {
            width: 10"based on your size",
            height: 12"based on your requirement"
        }
        }
    };```

dont forget to add ionic native plugin
import {GoogleMaps,GoogleMap,GoogleMapsEvent,LatLng,CameraPosition,MarkerOptions,Marker, MarkerIcon} from '@ionic-native/google-maps'; 

Thankyou