Est-il possible d’écrire du texte personnalisé sur Google Maps API v3, à côté du marqueur? ou je ne peux utiliser que la fenêtre d’information pour le faire?
Pour afficher un texte personnalisé, vous devez créer une superposition personnalisée. Vous trouverez ci-dessous un exemple adapté de la documentation officielle de Google. Vous pouvez également utiliser cette bibliothèque pour des fenêtres d’informations plus “élégantes”
La méthode la plus simple pour append une superposition de texte consiste à utiliser la classe MapLabel
depuis 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' });
Si le texte est statique, vous pouvez utiliser un marqueur et une image:
var label = new google.maps.Marker({ position: new google.maps.LatLng(50,50), map: map, icon: "/images/mytextasanimage.png" });
La dernière API (v3) recommande d’utiliser async defer
et un rappel lorsque l’API Maps est chargée.
Pour que cela fonctionne, vous devez définir la classe de superposition à partir de (ou après) l’initialisation lorsque la classe google
a été définie. Sinon, vous obtiendrez google not defined
erreurs google not defined
.
function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 40, lng: -30 }, zoom: 3 }); TxtOverlay.prototype = new google.maps.OverlayView(); var overlay = new TxtOverlay(new google.maps.LatLng(0, 0), "Have a wonderful overlay day", "customCSSClass", map); } ... //adapded from answer above 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; this.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 atsortingbutes. 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); } this.draw = function() { var overlayProjection = this.getProjection(); // Resortingeve 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'; } this.onRemove = function() { this.div_.parentNode.removeChild(this.div_); this.div_ = null; } this.hide = function() { if (this.div_) { this.div_.style.visibility = "hidden"; } } this.show = function() { if (this.div_) { this.div_.style.visibility = "visible"; } } this.toggle = function() { if (this.div_) { if (this.div_.style.visibility == "hidden") { this.show(); } else { this.hide(); } } } this.toggleDOM = function() { if (this.getMap()) { this.setMap(null); } else { this.setMap(this.map_); } } // Explicitly call setMap() on this overlay this.setMap(map); }
**HERE IS THE CODE WHICH IS WORKING & YOU CAN ALSO CHANGE SOURCE AND DESTINATION AND SEE THE MAGIC OF MAP MOVING** Text Over Maps