Google Maps API: Adding letters to my markers on my google map

Question

I'm trying to add a letter to my marker and then have multiple markers (14 to be accurate) with letters. l have so far done this without success. I'm a complete novice with code and google API.

Can you tell what code l need to add and where?

Below is my 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">

Venue Location

Thanks

Answer 1

Here is the code to add markers with alphabets. Run the loop for all the markers, index is each marker position

let 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 2

Use the Charts API to generate markers:

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

Answer 3

If you're trying to change the marker itself look at http://googlemapsmarkers.com - if you use their URL for your marker you can specify what the marker looks like:

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

Answer 4

Use the label option when defining the marker object like this:

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

From the Google Maps JavaScript API V3 Reference:

Type: string|MarkerLabel Adds a label to the marker. The label can either be a string, or a MarkerLabel object. Only the first character of the string will be displayed.

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>

And here's the same demo on Jsfiddle