API Google Maps: Ajouter des lettres à mes marqueurs sur ma carte google

Question

J'essaie d'ajouter une lettre à mon marqueur, puis j'ai plusieurs marqueurs (14 pour être précis) avec des lettres. Je l'ai fait jusqu'ici sans succès. Je suis un débutant complet avec du code et google API.

Pouvez-vous indiquer quel code dois-je ajouter et où?

Ci-dessous mon code:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=.... 
    type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
function load() { 
    if (GBrowserIsCompatible()) { 

    var map = new GMap2(document.getElementById("map")); 
    map.addControl(new GMapTypeControl()); 
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GOverviewMapControl()); 
    map.addControl(new GScaleControl()); 


    var bounds = map.getBounds(); 
    var southWest = bounds.getSouthWest(); 
    var northEast = bounds.getNorthEast(); 
    var lngSpan = northEast.lng() - southWest.lng(); 
    var latSpan = northEast.lat() - southWest.lat(); 
    for (var i = 0; i < 10; i++) { 
    var point = new GLatLng(southWest.lat() + latSpan * Math.random(), 
     southWest.lng() + lngSpan * Math.random()); 
    map.addOverlay(new GMarker(point)); 

    var point = new GLatLng(lat,ling); 
    map.setCenter(point, 10); 
    var marker = new GMarker(point); 
    map.addOverlay(marker); 

}

GEvent.addListener(map, "moveend", function() { 
    var center = map.getCenter(); 
    document.getElementById("message").innerHTML = center.toString(); 
    }); 



    map.setCenter(new GLatLng(lat,ling), 7); 

    } 
} 
//]]> 
</script> 
<style type="text/css"> 

Lieu Lieu

Merci

Answer 1

Si vous essayez de changer le marqueur lui-même regarde http://googlemapsmarkers.com - si vous utilisez leur URL de votre marqueur, vous pouvez spécifier ce que le marqueur ressemble:

http://googlemapsmarkers.com/v1/A/ff00ff/

Answer 2

utiliser l'API graphiques pour générer des marqueurs:

http://code.google.com/apis/chart/docs/gallery/dynamic_icons.html#pins

Answer 3

Voici le code pour ajouter marqueurs avec des alphabets. Démarrer la boucle pour tous les marqueurs, l'indice est chaque position du marqueur

var letter = String.fromCharCode("A".charCodeAt(0) + index), 
marker = new google.maps.Marker({ 
    map: this.map, 
    position: latLongObj, 
    icon: "http://maps.google.com/mapfiles/marker" + letter + ".png", 
    animation: google.maps.Animation.DROP 
}); 

Here is the list of map marker icons

Answer 4

L'option label lors de la définition de l'objet de marqueur comme ceci:

markerB = new google.maps.Marker({ 
     position: pointB, 
     title: "point B", 
     label: "B", 
     map: map 
    }) 

De l'Google Maps JavaScript API V3 Reference:

Type: chaîne | MarkerLabel Ajoute une étiquette au marqueur. L'étiquette peut être soit une chaîne, soit un objet MarkerLabel. Seul le premier caractère de la chaîne sera affiché.

function initMap() { 
 
    var pointA = new google.maps.LatLng(51.2750, 1.0870), 
 
    pointC = new google.maps.LatLng(50.8429, -0.1313), 
 
    pointB = new google.maps.LatLng(51.5379, 0.7138), 
 
    myOptions = { 
 
     zoom: 7, 
 
     center: pointA, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }, 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions), 
 
    markerA = new google.maps.Marker({ 
 
     position: pointA, 
 
     title: "point A", 
 
     label: "AAA", 
 
     map: map 
 
    }), 
 
    markerB = new google.maps.Marker({ 
 
     position: pointB, 
 
     title: "point B", 
 
     label: "B", 
 
     map: map 
 
    }), 
 
    markerC = new google.maps.Marker({ 
 
     position: pointC, 
 
     title: "point C", 
 
     label: "C", 
 
     map: map 
 
    }); 
 
} 
 

 
initMap();

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
 

 

 
<div id="map-canvas"></div>

Et voici le même demo on Jsfiddle