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

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

• javascript
• jquery
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Sep 23, 2015 at 10:31 MrUpsidown 22.5k1515 gold badges8383 silver badges141141 bronze badges asked Sep 22, 2015 at 19:34 The ChadThe Chad 13311 silver badge66 bronze badges 3

• 2 I noticed that as well. Probably need to open an issue in the issue tracker. – geocodezip Commented Sep 22, 2015 at 20:31
• 2 Correction. There is an open issue ("PendingReview") Issue #8573 from Sep 6, 2015. – geocodezip Commented Sep 22, 2015 at 22:33
• 1 A "solution" would be to use your own markers with that letter inside it or to create them "on the fly" with a backend image manipulation. Some inspiration here maybe: stackoverflow./a/20778505/1238965 – MrUpsidown Commented Sep 23, 2015 at 10:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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./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./mapfiles/marker" + letter + ".png

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

Custom icons are also available with https://code.google./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./mapfiles/marker" + letter + ".png"
    });

Updated CodePen