Google Maps API: Agregar letras a mis marcadores en mi mapa de Google

Question

Estoy tratando de agregar una letra a mi marcador y luego tener varios marcadores (14 para ser exactos) con letras. Hasta ahora he hecho esto sin éxito. Soy un completo novato con código y API de Google.

¿Puede decirme qué código necesito agregar y dónde?

A continuación es mi código:

<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"> 

Lugar Lugar

Gracias

Answer 1

Si usted está tratando de cambiar el propio marcador Mira http://googlemapsmarkers.com - si se utiliza la dirección URL de su marcador puede especificar lo que se ve el marcador como:

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

Answer 2

utilizar la API de gráficos para generar marcadores:

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

Answer 3

Este es el código para agregar marcadores con alfabetos. Ejecutar el bucle para todos los marcadores, índice es cada posición del marcador

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

Utilice la opción label al definir el objeto marcador como esto:

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

Desde el Google Maps JavaScript API V3 Reference:

Tipo: cadena | MarkerLabel Agrega una etiqueta al marcador. La etiqueta puede ser ya sea una cadena o un objeto MarkerLabel. Solo se mostrará el primer carácter de la cadena.

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>

Y aquí es lo mismo demo on Jsfiddle