API Карт Google. Почему метки не маркируются вместе с маркерами?

Я создал карту Google и добавил к ней несколько маркеров. Каждый маркер имеет однобуквенную метку ("A", "B", "C"). Затем я оживляю каждый маркер, чтобы подпрыгнуть.

Все работает отлично с одним раздражающим исключением: метки ("A", "B", "C") не отскакивают вместе с маркером, поэтому выглядит странно.

JS/jQuery ниже. У меня также есть ручка кода, показывающая проблему.

Любые предложения о том, как заставить метки подпрыгивать вместе с маркерами?

$(function () {

    var map;
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var labelIndex = 0;
    var markers = [];
    // Map locations
    var mapLocations = [{
        "name": "Windwood Hollow Park",
            "description": "This is the description for location 1",
            "position": {
            "lat": 33.942253,
            "lng": -84.278242
        }
    }, {
        "name": "Peeler Road Linear Park",
            "description": "This is the description for location 2",
            "position": {
            "lat": 33.940143,
            "lng": -84.278394
        }
    }, {
        "name": "Winters Chapel Animal Hospital",
            "description": "This is the description for location 3",
            "position": {
            "lat": 33.940707,
            "lng": -84.272021
        }
    }];

    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 33.943345,
            lng: -84.280186
        },
        zoom: 15
    });

    for (var j = 0; j < mapLocations.length; j++) {

        var currentLabel = labels[labelIndex++ % labels.length];

        // Create a map marker
        var marker = new google.maps.Marker({
            position: mapLocations[j].position,
            map: map,
            title: mapLocations[j].name,
            label: currentLabel
        });
        marker.setAnimation(google.maps.Animation.BOUNCE);
    }
});

Ответ 1

Ярлыки, похоже, не отражают значки маркеров. Чтобы получить яркие ярлыки, я бы предположил, что вы должны использовать значки маркеров, которые имеют помеченный символ на самой иконке. Графики изображений api (Устаревшие) служат для динамических пользовательских значков.

Пример динамического значка: http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF9900 где chld = anyletter (здесь A), а последние 6 символов - шестнадцатеричный код цвета (здесь FF9900).

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

Кроме того, Google также поддерживает несколько пользовательских значков в

maps.google.com/mapfiles/marker "+ letter +".png

где буква - любой алфавит. Например: http://maps.google.com/mapfiles/markerA.png

Пользовательские значки также доступны с https://code.google.com/p/google-maps-icons/wiki/NumericIcons

Задайте свойство значка объекта-маркера

var marker = new google.maps.Marker({
            position: mapLocations[j].position,
            map: map,
            title: mapLocations[j].name,
            icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
    });

Обновлено CodePen