Custom marker with label

I’m submitting a … (check one with “x”) [ X ] question

plugin version: [X] 2.0.0-beta3

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.3.0 "Google Maps SDK for iOS"
cordova-plugin-console 1.0.7 "Console"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-googlemaps 2.0.0-beta3-20170817-0747 "cordova-plugin-googlemaps"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

Currently, I am using the Google Maps JS SDK within an Ionic 3 app.

I used markerWithLabel library https://github.com/googlemaps/v3-utility-library so I can have a custom label like in the image below.

http://imgur.com/a/FZ1Qi

My question is that how it is possible to make exactly the same with cordova-plugin-googlemaps as I think, it’s not possible to make markerWithLabel library work with cordova-plugin-googlemaps ?

[alicarlo]

Sorry my English is bad It is my first post

If someone serves you, I could add a custom label on the map, add a second marker, create a canvas and convert it to base64 and assign it to the marker and it worked code example

addMarker(){
this.example.forEach((data: any) => {
      var canvas, context; 

      canvas = document.createElement("canvas");
      canvas.width = 50;
      canvas.height = 30;
      var  x=1, y=1, width=45, height=15, radius=0,  stroke= true;
      context = canvas.getContext("2d");
      if (typeof stroke == "undefined" ) {
        stroke = true;
      }
      if (typeof radius == "undefined") {
        radius = 5;
      }
      context.beginPath();
      context.moveTo(x + radius, y);
      context.lineTo(x + width - radius, y);
      context.quadraticCurveTo(x + width, y, x + width, y + radius);
      context.lineTo(x + width, y + height - radius);
      context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
      context.lineTo(x + radius, y + height);
      context.quadraticCurveTo(x, y + height, x, y + height - radius);
      context.lineTo(x, y + radius);
      context.quadraticCurveTo(x, y, x + radius, y);
      context.fillStyle = "white";
      context.fill();
      context.closePath();
      if (stroke) {
        context.stroke();
      }
    context.lineWidth = 1;
    context.strokeStyle = "#ffffff";
    context.font="12px Arial";
    context.textAlign="center"; 
    context.fillStyle = "black";
    context.fillText(data.name,22,12);

   var pngUrl = canvas.toDataURL("image/jpg");

   let marker: Marker = this.map.addMarkerSync({
        icon: data.icon,
        animation: 'DROP',
        position: {lat:data.lat, lng:data.lon},
      });
      marker.setZIndex(2);
      let marker2: Marker = this.map.addMarkerSync({
      icon: pngUrl,
      position: {lat:data.lat, lng:data.lon}
      });
      marker2.setZIndex(1);
      });

that the code is helpful

[wf9a5m75]

Create a canvas, draw a image, then draw your text on the canvas, then export base64 encoded strings.