Cordova-plugin-googlemaps: Custom marker with label

[HamzaLJ]

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 ?

[wf9a5m75]

You can pass base64 encoded strings (png,gif, and jpeg, no SVG) to the icon property.
This works for both v1.4 and v2.0.

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/class/Marker/README.md#base64-encoded-icon

[HamzaLJ]

@wf9a5m75 but still it's impossible to match the same style with the base64 encoded strings as with it you can only customize the marker icon, not put a text inside of that icon.

Is there a possibility to match the same design I provided on the URL ?

[wf9a5m75]

No.

[wf9a5m75]

Ok, I have a question. Is this feature implemented in the Google Maps API v3?
Of course, no.
Then what will you do?

[HamzaLJ]

That's why I used this library : https://github.com/googlemaps/v3-utility-library

Then How UBER, Lyft, etc.. are implementing such marker ?

[wf9a5m75]

Then How UBER, Lyft, etc.. are implementing such marker ?

They implement own code in native. They don't use Google Maps JavaScript API v3.

[HamzaLJ]

Then, I need to play with the source code of cordova-plugin-googlemaps to make my own custom marker, right ?

[wf9a5m75]

Why don't you use <canvas>? You are JS developer, aren't you?

https://www.w3schools.com/tags/canvas_drawimage.asp

Then you can generate base64 encoded strings. It's very easy.

[wf9a5m75]

If you have enough knowledge of Java and Objective-c, you don't need to play the source code of this plugin. Write the native code is faster implementation.

[wf9a5m75]

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

[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