Unable to change the title style of the marker - google-maps

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.stack.imgur.com/BlSuP.png