Google Maps Draw Text on Map
Is it possible to write custom text on Google Maps API v3?
To show custom text you need to create a custom overlay. Below is an example adapted from official Google documentation. You could also use this library for more "stylish" info windows
<html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script> //adapded from this example http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays //text overlays function TxtOverlay(pos, txt, cls, map) { // Now initialize all properties. this.pos = pos; this.txt_ = txt; this.cls_ = cls; this.map_ = map; // We define a property to hold the image's // div. We'll actually create this div // upon receipt of the add() method so we'll // leave it null for now. this.div_ = null; // Explicitly call setMap() on this overlay this.setMap(map); } TxtOverlay.prototype = new google.maps.OverlayView(); TxtOverlay.prototype.onAdd = function() { // Note: an overlay's receipt of onAdd() indicates that // the map's panes are now available for attaching // the overlay to the map via the DOM. // Create the DIV and set some basic attributes. var div = document.createElement('DIV'); div.className = this.cls_; div.innerHTML = this.txt_; // Set the overlay's div_ property to this DIV this.div_ = div; var overlayProjection = this.getProjection(); var position = overlayProjection.fromLatLngToDivPixel(this.pos); div.style.left = position.x + 'px'; div.style.top = position.y + 'px'; // We add an overlay to a map via one of the map's panes. var panes = this.getPanes(); panes.floatPane.appendChild(div); } TxtOverlay.prototype.draw = function() { var overlayProjection = this.getProjection(); // Retrieve the southwest and northeast coordinates of this overlay // in latlngs and convert them to pixels coordinates. // We'll use these coordinates to resize the DIV. var position = overlayProjection.fromLatLngToDivPixel(this.pos); var div = this.div_; div.style.left = position.x + 'px'; div.style.top = position.y + 'px'; } //Optional: helper methods for removing and toggling the text overlay. TxtOverlay.prototype.onRemove = function() { this.div_.parentNode.removeChild(this.div_); this.div_ = null; } TxtOverlay.prototype.hide = function() { if (this.div_) { this.div_.style.visibility = "hidden"; } } TxtOverlay.prototype.show = function() { if (this.div_) { this.div_.style.visibility = "visible"; } } TxtOverlay.prototype.toggle = function() { if (this.div_) { if (this.div_.style.visibility == "hidden") { this.show(); } else { this.hide(); } } } TxtOverlay.prototype.toggleDOM = function() { if (this.getMap()) { this.setMap(null); } else { this.setMap(this.map_); } } var map; function init() { var latlng = new google.maps.LatLng(37.9069, -122.0792); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"), myOptions); var marker = new google.maps.Marker({ position: latlng, map: map, title: "Hello World!" }); customTxt = "<div>Blah blah sdfsddddddddddddddd ddddddddddddddddddddd<ul><li>Blah 1<li>blah 2 </ul></div>" txt = new TxtOverlay(latlng, customTxt, "customBox", map) } </script> <style> .customBox { background: yellow; border: 1px solid black; position: absolute; } </style> </head> <body onload="init()"> <div id="map" style="width: 600px; height: 600px;"> </div> </body> </html> By far the easiest way to add a Text Overlay is to use the MapLabel class from https://github.com/googlemaps/js-map-label
var mapLabel = new MapLabel({ text: 'Test', position: new google.maps.LatLng(50,50), map: map, fontSize: 20, align: 'right' }); It the text is static, you can use a marker and an image :
var label = new google.maps.Marker({ position: new google.maps.LatLng(50,50), map: map, icon: "/images/mytextasanimage.png" }); Source: https://newbedev.com/is-it-possible-to-write-custom-text-on-google-maps-api-v3