Menu
Is it possible to write a custom text on Google Maps API v3 next to the marker, or I can use only the info window to do that?
546
Google Maps allows you to customize maps by adding markers manually or as a group. This method is simple and free, making it a great choice for anyone with limited experience or budget. Click on the Menu icon in the top left-hand corner. Click on the “Your Places” option in the menu.
Google also started to require all API calls to use a valid API key, which has to be linked to a Google Cloud Platform account. Small companies aren't likely to reach the new limit. But when the number of customers and everyday freight traffic grows, the price for Google Maps services grows significantly.
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' }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
