Tips for resizing the background to match the font size on a canvas marker in Google Maps

Question

Tips for resizing the background to match the font size on a canvas marker in Google Maps

Check out my jsFiddle code below:

 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 attempting to style the marker similar to this example:

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;
    
    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 have limited experience with canvas manipulation and would appreciate any suggestions or tips on how to improve this. Thank you!

javascript css html google-maps canvas

Answer 1

Answer №1

If you're looking to enhance your map, consider integrating your canvas into a CustomMarker

Take a look at this 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/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwJS...

// Tell me more about it...
var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur quam semper felis condimentum, non placerat urna vulputate. Quisque nec mauris metus.";

console.log(lorem);

 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>

Answer 2

If you're looking to enhance your map, consider integrating your canvas into a CustomMarker

Take a look at this 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/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwJS...

// Tell me more about it...
var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur quam semper felis condimentum, non placerat urna vulputate. Quisque nec mauris metus.";

console.log(lorem);

 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>

Tips for resizing the background to match the font size on a canvas marker in Google Maps

Answer №1

Similar questions

What is the most effective method for creating a dark background with light text in Bootstrap without using SASS?

Displaying a specific division solely on mobile devices with jQuery

A Comprehensive Guide to Handling Errors in Angular 4: Passing the err Object from Service to Component

Can you identify this numerical category?

Determine the starting position of a div's CSS bottom using jQuery before the hover animation begins

What is the best way to use appendChild within an AJAX get function to manipulate the DOM

Unable to pinpoint the source of the excess spacing within a form field

What steps can I take to safeguard my Javascript from unauthorized access by external entities?

Break down and simplify the code into individual components

Encountering issues with SignInWithRedirect feature's functionality

What is the best method to retrieve duplicate fields from a database in HTML5?

AngularJS File Input element triggering only once when selecting the same file

Having difficulty positioning content inside a div element

Is it possible to render array items into separate divs using the .map() method without displaying commas?

Navigating through images within my application

I need a counter in my React application that is triggered only once when the page scrolls to a specific element

Move the JavaScript code from the <script> element in the HTML file to a

Replace all instances of the same word with the word "and" using regular expressions

What is the best way to add data from an array to a DOM element in the same order it was retrieved from Firebase?

Conundrum encountered: SIGTRAP causing Electron failure to initialize