Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to write custom text on Google Maps API v3?

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?

like image 546
user198003 Avatar asked Oct 17 '10 15:10

user198003


People also ask

Can you customize Google Maps API?

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.

Why is Google Maps API so expensive?

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.


2 Answers

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>
like image 165
Michal Avatar answered Sep 21 '22 18:09

Michal


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' }); 
like image 33
Jake Wilson Avatar answered Sep 21 '22 18:09

Jake Wilson