web-dev-qa-db-fra.com

Comment afficher une étiquette à côté d'un marqueur pour Google Maps?

J'aimerais afficher une étiquette de texte à côté des marqueurs sur Google Maps. J'ai déjà utilisé Virtual Earth et je commence tout juste à utiliser Google Maps. J'ai essayé de définir la propriété Title mais cela ne change que le texte survolé. 

Existe-t-il un moyen d'afficher une petite ligne de texte sous un marqueur qui y restera lorsque l'utilisateur fera un zoom, un panoramique et utilisera la carte?

Merci d'avance!

javascriptgoogle-maps
22
Great Turtle

Il y a une bonne classe de classe ici , bien que vous deviez l'ajouter à côté des marqueurs.

13
Chris B

Pour Google Maps JavaScript API v3, consultez les exemples ici .

Code source disponible sous forme normale ou réduite .

25
Drew Noakes

Si vous souhaitez simplement afficher une étiquette sous le marqueur, vous pouvez étendre Google Maps Marker pour ajouter une méthode de définition de libellé. Vous pouvez également définir l'objet Label en étendant Google Maps overlayView comme ceci.

Démo: jsFiddle

<script type="text/javascript">
    var point = { lat: 22.5667, lng: 88.3667 };
    var markerSize = { x: 22, y: 40 };


    google.maps.Marker.prototype.setLabel = function(label){
        this.label = new MarkerLabel({
          map: this.map,
          marker: this,
          text: label
        });
        this.label.bindTo('position', this, 'position');
    };

    var MarkerLabel = function(options) {
        this.setValues(options);
        this.span = document.createElement('span');
        this.span.className = 'map-marker-label';
    };

    MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
        onAdd: function() {
            this.getPanes().overlayImage.appendChild(this.span);
            var self = this;
            this.listeners = [
            google.maps.event.addListener(this, 'position_changed', function() { self.draw();    })];
        },
        draw: function() {
            var text = String(this.get('text'));
            var position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
            this.span.innerHTML = text;
            this.span.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) + 10 + 'px';
            this.span.style.top = (position.y - markerSize.y + 40) + 'px';
        }
    });
    function initialize(){
        var myLatLng = new google.maps.LatLng(point.lat, point.lng);
        var gmap = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 5,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var myMarker = new google.maps.Marker({
            map: gmap,
            position: myLatLng,
            label: 'Hello World!',
            draggable: true
        });
    }
</script>
<style>
    .map-marker-label{
        position: absolute;
    color: blue;
    font-size: 16px;
    font-weight: bold;
    }
</style>

Cela fonctionnera.

6
Ramyani

Voici un exemple de code permettant de résoudre le problème: https://github.com/printercu/google-maps-utility-library-v3-read-only/tree/master/markerwithlabel/examples

C'est une classe personnalisée appelée InfoBox. Vous pouvez voir la référence de l'API sur le lien ci-dessus

Le fichier js peut être inclus à partir d’ici: https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/infobox/src/infobox.js

À votre santé!

2
Himanshu Khurana

Une alternative à l’utilisation de la bibliothèque js est simplement de créer une icône .png qui inclura votre texte. Cela semble idiot, mais vous pouvez utiliser un service externe pour cela (comme celui-ci ).

Vous téléchargez votre icône et obtenez un lien en retour. Si vous ajoutez du texte à l'URL des liens, votre icône avec ce texte restitué sera renvoyée.

0
fitek

Même cette question a été résolue, j’ai trouvé cette ressource , qui, à mon avis, est une bonne solution pour ce problème et pourrait être utile . Une solution similaire pourrait également être trouvée ici .

0
AlexAndro