Unable to change the title style of the marker

Question

I am trying to change the title of the marker style

This is the HTML i am constructing and passing

But its not applying style

Could you please let em know how to resolve this

function createMarker(latlng, html) {

      var  tooltiponclcik = 'Company Name :  1  , <br> ' + 'Sales Off Name :  2  , <br>' + 'Warehouse Name :  3 ';     



    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5,
        title:tooltiponclcik
    });


    markerArray.push(marker); //push local var marker into global array
}

This is my fiddle

http://jsfiddle.net/6wp7enot/16/

Answer 1

The title property of the Marker is used to create rollover text. That text cannot be styled with HTML formatting tags (it can only be straight text).

If you want to create formatted text the appears on mouseover you can, but you need to code that yourself.

proof of concept fiddle, using the code from my answer to: title of a marker of google map marker API

code snippet:

function createMarker(latlng, html) {

  var tooltiponclcik = 'Company Name :  1  , <br> ' + 'Sales Off Name :  2  , <br>' + 'Warehouse Name :  3 ';



  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat() * -100000) << 5,
    tooltip: tooltiponclcik
  });
  var tooltip = new Tooltip({
    map: map
  }, marker);
  tooltip.bindTo("text", marker, "tooltip");
  google.maps.event.addListener(marker, 'mouseover', function() {
    tooltip.addTip();
    tooltip.getPos2(marker.getPosition());
  });

  google.maps.event.addListener(marker, 'mouseout', function() {
    tooltip.removeTip();
  });

  markerArray.push(marker); //push local var marker into global array
}


var geocoder;
var map;
var markerArray = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var normalMarker = new google.maps.Marker({
    position: {
      lat: 37.43,
      lng: -122.14
    },
    title: "normal tooltip",
    map: map
  });
  // from https://stackoverflow.com/questions/19279199/title-of-a-marker-of-google-map-marker-api/
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(37.442, -122.142),
    map: map,
    tooltip: '<B>This is a customized tooltip</B>'
  });

  var tooltip = new Tooltip({
    map: map
  }, marker);
  tooltip.bindTo("text", marker, "tooltip");
  google.maps.event.addListener(marker, 'mouseover', function() {
    tooltip.addTip();
    tooltip.getPos2(marker.getPosition());
  });

  google.maps.event.addListener(marker, 'mouseout', function() {
    tooltip.removeTip();
  });

  //your code
  createMarker(new google.maps.LatLng(37.45, -122.162), "stuff for infowindow");

}
google.maps.event.addDomListener(window, "load", initialize);

// The custom tooltip class

// Constructor function
function Tooltip(opts, marker) {

  // Initialization
  this.setValues(opts);
  this.map_ = opts.map;
  this.marker_ = marker;
  var div = this.div_ = document.createElement("div");
  // Class name of div element to style it via CSS
  div.className = "tooltip";
  this.markerDragging = false;
}


Tooltip.prototype = {

  // Define draw method to keep OverlayView happy
  draw: function() {},

  visible_changed: function() {
    var vis = this.get("visible");
    this.div_.style.visibility = vis ? "visible" : "hidden";
  },

  getPos: function(e) {
    var projection = this.getProjection();
    // Position of mouse cursor
    var pixel = projection.fromLatLngToDivPixel(e.latLng);
    var div = this.div_;

    // Adjust the tooltip's position
    var gap = 15;
    var posX = pixel.x + gap;
    var posY = pixel.y + gap;

    var menuwidth = div.offsetWidth;
    // Right boundary of the map
    var boundsNE = this.map_.getBounds().getNorthEast();
    boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE);

    if (menuwidth + posX > boundsNE.pixel.x) {
      posX -= menuwidth + gap;
    }
    div.style.left = posX + "px";
    div.style.top = posY + "px";

    if (!this.markerDragging) {
      this.set("visible", true);
    }
  },

  getPos2: function(latLng) { // This is added to avoid using listener (Listener is not working when Map is quickly loaded with icons)
    var projection = this.getProjection();
    // Position of mouse cursor
    var pixel = projection.fromLatLngToDivPixel(latLng);
    var div = this.div_;

    // Adjust the tooltip's position
    var gap = 5;
    var posX = pixel.x + gap;
    var posY = pixel.y + gap;

    var menuwidth = div.offsetWidth;
    // Right boundary of the map
    var boundsNE = this.map_.getBounds().getNorthEast();
    boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE);

    if (menuwidth + posX > boundsNE.pixel.x) {
      posX -= menuwidth + gap;
    }
    div.style.left = posX + "px";
    div.style.top = posY + "px";

    if (!this.markerDragging) {
      this.set("visible", true);
    }
  },

  addTip: function() {
    var me = this;
    var g = google.maps.event;
    var div = me.div_;
    div.innerHTML = me.get("text").toString();
    // Tooltip is initially hidden
    me.set("visible", false);
    // Append the tooltip's div to the floatPane
    me.getPanes().floatPane.appendChild(this.div_);

    // In IE this listener gets randomly lost after it's been cleared once.
    // So keep it out of the listeners array.
    g.addListener(me.marker_, "dragend", function() {
      me.markerDragging = false;
    });

    // Register listeners
    me.listeners = [
      //   g.addListener(me.marker_, "dragend", function() {
      //    me.markerDragging = false; }),	
      g.addListener(me.marker_, "position_changed", function() {
        me.markerDragging = true;
        me.set("visible", false);
      }),
      g.addListener(me.map_, "mousemove", function(e) {
        me.getPos(e);
      })
    ];
  },

  removeTip: function() {
    // Clear the listeners to stop events when not needed.
    if (this.listeners) {
      for (var i = 0, listener; listener = this.listeners[i]; i++) {
        google.maps.event.removeListener(listener);
      }
      delete this.listeners;
    }
    // Remove the tooltip from the map pane.
    var parent = this.div_.parentNode;
    if (parent) parent.removeChild(this.div_);
  }
};


function inherit(addTo, getFrom) {

  var from = getFrom.prototype; // prototype object to get methods from
  var to = addTo.prototype; // prototype object to add methods to
  for (var prop in from) {
    if (typeof to[prop] == "undefined") to[prop] = from[prop];
  }
}

// Inherits from OverlayView from the Google Maps API
inherit(Tooltip, google.maps.OverlayView);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
.tooltip {
  position: absolute;
  width: 145px;
  padding: 5px;
  border: 1px solid gray;
  font-size: 9pt;
  font-family: Verdana;
  background-color: #fff;
  color: #000;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

Answer 2

$(document).ready(function () {
    var a = 10.109240;
    var b = 76.354261;
    var c = '<div style="font-weight: 500;"><dd style="color: #2196F3;">change text color  <i class="fa fa-map-marker"></i></dd><dd style="color: red;">change text color  <i class="fa fa-check"></i></dd></div>';
    var map;
    var host = window.location.origin;
    var host0 = window.location.hostname;
    var host1 = window.location.pathname;   
    var icon = "/images/map-icon.png";
    map = new google.maps.Map(document.getElementById('map_canvas'),{
        center: { lat: a, lng: b },
        zoom: 8,
        icon : icon
    });
    var infowindow = new google.maps.InfoWindow();
    var latLng = new google.maps.LatLng(a, b);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: icon,
        title: c
    });
    infowindow.setContent(c);
    infowindow.open(map, marker);
});

[my work][1][1]: https://i.sstatic.net/BlSuP.png