API di Google Maps - Perché le etichette non vengono animate insieme ai marcatori?

Question

Ho creato una mappa di Google e ho aggiunto alcuni indicatori. Ogni marcatore ha un'etichetta di una sola lettera ("A", "B", "C"). Quindi animare ciascun marker per rimbalzare.

Che tutto funzioni correttamente con una fastidiosa eccezione: le etichette ("A", "B", "C") non rimbalzano insieme al marcatore, quindi sembra strano.

Il JS/jQuery è sotto. I also have a code pen here showing the issue.

Qualche suggerimento su come far rimbalzare le etichette insieme ai marcatori?

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

Le etichette non sembrano rimbalzare con le icone dei marcatori. Per ottenere etichette rimbalzanti suggerirei di utilizzare le icone dei marcatori con il carattere etichettato sull'icona stessa. Image Charts api (Obsoleto) serve icone personalizzate dinamiche.

Esempio di un'icona dinamica sarebbe: http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF9900 dove chld = anyletter (qui A) e gli ultimi 6 caratteri sono codice colore esadecimale (qui FF9900).

L'api grafico deprecato consente di impostare il colore e l'etichetta personalizzati per il marcatore. I nuovi grafici api hanno abbandonato il supporto per le icone dinamiche.

alternativa Google mantiene anche alcune icone personalizzate sul

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

dove lettera è un qualsiasi alfabeto. Ad esempio: http://maps.google.com/mapfiles/markerA.png

icone personalizzate sono disponibili anche con https://code.google.com/p/google-maps-icons/wiki/NumericIcons

Impostare la proprietà dell'icona dell'oggetto marcatore

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