Как я могу постоянно отображать метку / заголовок для маркера в Google Maps V3?

По крайней мере, с октября 2016 года официальный API предоставляет возможность добавлять постоянно видимые метки, длина которых превышает одну букву. См. этот ответ участника проекта Google.

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

По умолчанию результат выглядит так:

Довольно нечитабельно. К счастью, API также позволяет использовать объект MarkerLabel вместо простой строки:

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

Приведенный выше фрагмент дает следующий результат:

Однако исходный вопрос заключался в том, может ли этикетка располагаться под маркером. В документации MarkerLabel упоминается, что это возможно с помощью настраиваемого значка и свойства labelOrigin. Если мы хотим использовать значок по умолчанию, он доступен на GitHub. Добавим объект значка:

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),
  },
});

Это приводит к следующему:

Вполне нормально! Однако у всего этого подхода есть недостаток, которого нет у рамки в исходном вопросе: читаемость с каждым типом карты. Если тип карты изменен со спутника на значение по умолчанию, итоговая надпись будет трудночитаемой:

Простой, но не идеальный способ избежать низкого контраста в обоих типах - установить color: 'gray':

Однако серый цвет не подходит для городских районов. Лучшим вариантом было бы применить свойство text-shadow CSS для рисования черных линий для белого текста. Однако я не могу найти способ применить свойство к меткам, потому что несколько элементов DOM, созданных Google Maps, определяют класс:

Лучший вариант, который я придумал, - это обнаруживать изменения в типе карты и обновлять цвет меток для каждого маркера:

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);
    }
  }
});

Однако даже это не помогло бы на снежных или облачных спутниковых снимках. Я думаю, что в большинстве случаев этого достаточно. Тем не менее, приятно иметь возможность отображать видимые метки с помощью официального API, без каких-либо плагинов :)

Я нашел решение в другом сообщении, которое отлично сработало для меня.

Добавить метку нумерации к маркеру карты Google

Вы не можете! Но есть еще одна часть API карт, которую вы можете использовать для постоянного отображения текста, прикрепленного к вашим маркерам (без использования каких-либо сторонних компонентов), она называется infoWindow. Взгляните на это, чтобы получить образец кода и увидеть его в действии: https://developers.google.com/maps/documentation/javascript/examples/event-closure

Если вы осмеливаетесь использовать сторонний код, то вот что-то более близкое по внешнему виду, которое вам нужно: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

Я использую следующее:

MarkerWithLabel.js

(изображение - это просто файл flag.png)

Использование javascript в моем документе X.html

это выглядит примерно так ....

    <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>

Прочтите информацию о лицензии для API карт Google здесь: https://www.google.com/intx/en_uk/work/mapsearth/products/mapsapi.html

Вы должны иметь возможность использовать тот же принцип, что и в этом пример. Вместо того, чтобы слушать события мыши, вы должны создать новый настраиваемый элемент управления для каждого маркера, а затем расположить его под маркером. Надеюсь, это сработает.