Comment puis-je afficher en permanence l'étiquette / le titre du marqueur dans Google Maps V3

Question

Je veux afficher les marqueurs sur Google map avec le titre affiché sous eux comme indiqué dans l'image 

Maintenant, ce que j'ai lu était possible dans v2 en utilisant ELabel mais est obsolète dans v3. Existe-t-il un moyen possible d'afficher du texte sous les icônes de marqueurs dans Google Maps V3?

Answer 1

J'ai trouvé la solution dans un autre poste qui fonctionnait parfaitement pour moi.

Ajouter une étiquette de numérotation au marqueur google map

Answer 2

Depuis au moins octobre 2016, l'API officielle fournit un moyen d'ajouter des étiquettes visibles en permanence qui dépassent une lettre. Voir cette réponse d'un membre du projet Google .

var m = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  label: 'Hello world',
});

Par défaut, le résultat ressemble à:

Assez illisible. Heureusement, l'API autorise également un objet MarkerLabel au lieu d'une chaîne simple:

var m = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  label: {
    color: 'white',
    fontWeight: 'bold',
    text: 'Hello world',
  },
});

L'extrait ci-dessus donne le résultat suivant:

Cependant, la question initiale demandait si l'étiquette pouvait être située sous le marqueur. Les documents MarkerLabel mentionnent que cela est possible avec une icône personnalisée et une propriété labelOrigin. Si nous voulons utiliser l'icône par défaut, l'une est disponible sur GitHub . Ajoutons l'objet icône:

var m = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  label: {
    color: 'white',
    fontWeight: 'bold',
    text: 'Hello world',
  },
  icon: {
    labelOrigin: new google.maps.Point(11, 50),
    url: 'default_marker.png',
    size: new google.maps.Size(22, 40),
    Origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(11, 40),
  },
});

Il en résulte:

Assez bien! Cependant, toute cette approche présente un inconvénient que la case de la question d'origine n'a pas: la lisibilité avec chaque type de carte. Si le type de carte passe du satellite à celui par défaut, l'étiquette résultante est difficile à lire:

Un moyen simple mais pas parfait pour éviter le faible contraste dans les deux types est de définir color: 'gray':

Cependant, la couleur grise échoue près des zones urbaines. Une meilleure option serait d'appliquer text-shadow Propriété CSS pour dessiner des doublures noires pour le texte blanc. Cependant, je ne trouve pas de moyen d'appliquer la propriété aux étiquettes car peu d'éléments DOM créés par Google Maps définissent une classe:

La meilleure option que j'ai trouvée est de détecter les changements dans le type de carte et de mettre à jour la couleur de l'étiquette pour chaque marqueur:

map.addListener('maptypeid_changed', function () {
  var typeToColor, type, color, k, label;

  typeToColor = {
    'terrain': 'black',
    'roadmap': 'black',
    'hybrid': 'white',
    'satellite': 'white',
  };

  type = map.getMapTypeId();
  color = typeToColor[type];

  for (k in markers) {
    if (markers.hasOwnProperty(k)) {
      label = markers[k].getLabel();
      label.color = color;
      markers[k].setLabel(label);
    }
  }
});

Cependant, même cela échouerait sur l'imagerie satellite enneigée ou nuageuse. Je pense que c'est encore assez bon dans la plupart des cas. Néanmoins, il est agréable d'avoir la possibilité d'afficher des étiquettes visibles avec l'API officielle, sans aucun plugin :)

Answer 3

J'utilise ce qui suit:

MarkerWithLabel.js

 (l'image est juste un fichier flag.png)

Utiliser javascript dans mon document X.html

ça ressemble à ça ....

    <style type="text/css">
        .labels {
            color: black;
            background-color: white;
            font-family: "Lucida Grande", "Arial", sans-serif;
            font-size: 0.8em;
            font-weight: bold;
            text-align: center;
            width: 6em;
            border: 1px solid black;
            white-space: normal;
        }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=true"></script>
    <!--MarkerwithLabelClass - adjust the path!! -->
    <script src="YourPathHere/markerwithlabel.js"></script>

<script type="text/javascript">
//insert standaard initializing of googlemaps here
//and other windows.onload function
window.onload = function Initialize() {
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 }
         function CreateMarker(lat, long, titel, label, image, anchorY, anchorX){

                   var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(long));//I use parseFloat cause my parameters are strings(coming from JSON-string)
                    var marker = new MarkerWithLabel({
                        zIndex: 1,
                        title: titel,
                        position: latlng,
                        draggable: false,
                        icon: image,
                        labelContent: label,
                        labelAnchor: new google.maps.Point(30, -2),
                        labelClass: "labels", // the CSS class for the label
                        labelStyle: { opacity: 0.80 }
                    });

                    return marker;
    }
 </script>

Lisez les informations de licence pour l'API Google Maps ici: https://www.google.com/intx/en_uk/work/mapsearth/products/mapsapi.html

Answer 4

Vous devriez pouvoir utiliser le même principe que dans ce exemple . Au lieu d'écouter les événements de la souris, vous devez créer un nouveau contrôle personnalisé pour chaque marqueur, puis le positionner sous le marqueur. J'espère que ça marche.