Google Maps API - Why don't labels animate along with markers?

Question

I've created a Google Map and added a few markers to it. Each marker has a one-letter label ("A", "B", "C"). I then animate each marker to bounce.

That all works fine with one annoying exception: The labels ("A", "B", "C") don't bounce along with the marker, so it looks odd.

The JS/jQuery is below. I also have a code pen here showing the issue.

Any suggestions on how to have the labels bounce along with the markers?

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

Answer 1

The labels don't seem to bounce with the marker icons. To achieve bouncy labels I would suggest that you should use marker icons that have the labelled character on the icon itself. Image Charts api(Deprecated) serves dynamic custom icons.

Example of dynamic icon would be: http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF9900 where chld=anyletter (here A) and the last 6 characters are hex color code(here FF9900).

Deprecated chart api allows to set custom colour and label for the marker. New charts api dropped the support for dynamic icons.

Alternatively google also maintains a few custom icons on

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

where letter is any alphabet. Eg: http://maps.google.com/mapfiles/markerA.png

Custom icons are also available with https://code.google.com/p/google-maps-icons/wiki/NumericIcons

Set the icon property of marker object

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

Updated CodePen