How to adjust the size of the background to the font size on a marker created with canvas, google maps?

Question

I have the following jsFiddle code

 var marker = new google.maps.Marker({
              position: new google.maps.LatLng(-25.363882,131.044922),
              map: map,
              title:"Hello World!",
              icon: CanvasCrear("hola", 15)
          });

I'm trying to get the marker to look like the following jsFiddle

function CanvasCrear(texto, height_)  {

    var canvas = document.createElement("canvas");
    var context;
    var txtWidth; 

    txtWidth = canvas.getContext("2d");   
    txtWidth.font = "12px Sans-Serif";

    var width_ =  txtWidth.measureText(texto).width;//Calculando el width de la letra
    //canvas.style.border = "thin solid black";
    canvas.setAttribute("width", (width_ + "px"));
    canvas.setAttribute("height", (height_ +"px"));

    context = canvas.getContext("2d");   
    context.font = "12px Sans-Serif";

    context.fillStyle = "black";
    context.fillText(texto, 0, 12);

    document.body.appendChild(canvas);
    }


    window.onload = function() {
        var texto = " " + "hola mundo" + " ";
        var height = 15;
        CanvasCrear(texto, height);
    };

I'm no expert on canvas , but I 've tried to do their best to adapt , I do not really know how to do this . Any ideas?

Answer 1

I would suggest adding your canvas to a CustomMarker

proof of concept fiddle

  function CustomMarker(latlng,  map, text) {
    this.latlng_ = latlng;
    this.text_ = text;
    // Once the LatLng and text are set, add the overlay to the map.  This will
    // trigger a call to panes_changed which should in turn call draw.
    this.setMap(map);
  }

  CustomMarker.prototype = new google.maps.OverlayView();

  CustomMarker.prototype.draw = function() {
    var me = this;

    // Check if the div has been created.
    var div = this.div_;
    if (!div) {
      // Create a overlay text DIV
      div = this.div_ = document.createElement('DIV');
      // Create the DIV representing our CustomMarker
      div.style.border = "none";
      div.style.position = "absolute";
      div.style.paddingLeft = "0px";
      div.style.cursor = 'pointer';


        CanvasCrear(this.text_, 15,div)

      google.maps.event.addDomListener(div, "click", function(event) {
        google.maps.event.trigger(me, "click");
      });

      // Then add the overlay to the DOM
      var panes = this.getPanes();
      panes.overlayImage.appendChild(div);
    }

    // Position the overlay 
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
    if (point) {
      div.style.left = point.x + 'px';
      div.style.top = point.y + 'px';
    }
  };

  CustomMarker.prototype.remove = function() {
    // Check if the overlay was on the map and needs to be removed.
    if (this.div_) {
      this.div_.parentNode.removeChild(this.div_);
      this.div_ = null;
    }
  };

  CustomMarker.prototype.getPosition = function() {
   return this.latlng_;
  };

code snippet:

 function CanvasCrear(texto, height_, div) { var context; var canvas = document.createElement("canvas"); canvas.style.cssText = 'color: Black; background: #ffffff; background: url(data:image/svg+xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmI0NDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ffb442)); background: -webkit-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: -o-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: -ms-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: linear-gradient(to bottom, #ffffff 0%, #ffb442 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffb442", GradientType=0); border-width: 1px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-family:"Lucida Grande", "Arial", sans-serif; pointer-events: none;'; var txtWidth; txtWidth = canvas.getContext("2d"); txtWidth.font = "12px Sans-Serif"; var width_ = txtWidth.measureText(texto).width; //Calculando el width de la letra console.log(width_); //canvas.style.border = "thin solid black"; canvas.setAttribute("width", (width_ + "px")); canvas.setAttribute("height", (height_ + "px")); context = canvas.getContext("2d"); context.font = "12px Sans-Serif"; context.fillStyle = "black"; context.fillText(texto, 0, 12); return div.appendChild(canvas); } // example var map; var overlay; function initialize() { var opts = { zoom: 9, center: new google.maps.LatLng(-34.397, 151.644), mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), opts); overlay = new CustomMarker(new google.maps.LatLng(-34.345, 151.65), map, "hola"); var overlay2 = new CustomMarker(new google.maps.LatLng(-34.395, 151.644), map, "hello"); } google.maps.event.addDomListener(window, "load", function() { initialize(); }); function CustomMarker(latlng, map, text) { this.latlng_ = latlng; this.text_ = text; // Once the LatLng and text are set, add the overlay to the map. This will // trigger a call to panes_changed which should in turn call draw. this.setMap(map); } CustomMarker.prototype = new google.maps.OverlayView(); CustomMarker.prototype.draw = function() { var me = this; // Check if the div has been created. var div = this.div_; if (!div) { // Create a overlay text DIV div = this.div_ = document.createElement('DIV'); // Create the DIV representing our CustomMarker div.style.border = "none"; div.style.position = "absolute"; div.style.paddingLeft = "0px"; div.style.cursor = 'pointer'; CanvasCrear(this.text_, 15, div) google.maps.event.addDomListener(div, "click", function(event) { google.maps.event.trigger(me, "click"); }); // Then add the overlay to the DOM var panes = this.getPanes(); panes.overlayImage.appendChild(div); } // Position the overlay var point = this.getProjection().fromLatLngToDivPixel(this.latlng_); if (point) { div.style.left = point.x + 'px'; div.style.top = point.y + 'px'; } }; CustomMarker.prototype.remove = function() { // Check if the overlay was on the map and needs to be removed. if (this.div_) { this.div_.parentNode.removeChild(this.div_); this.div_ = null; } }; CustomMarker.prototype.getPosition = function() { return this.latlng_; }; function addOverlay() { overlay.setMap(map); } function removeOverlay() { overlay.setMap(null); } 

  html { width: 100%; height: 100%; } body { width: 100%; height: 100%; margin: 0; } #map_canvas { width: 100%; height: 100%; } 

 <script src="http://maps.googleapis.com/maps/api/js?v=3"></script> <div id="map_canvas" width="300" height="200"></div>