In this article I will explain how to display Alphabets (Letters) or Numbers in markers of Google Maps V3. In order to display Alphabets (Letters) or in Google Maps V3 markers, the Google Maps Chart API is used to generate custom markers.
 
 
HTML Markup
The HTML markup consists of two RadioButtons to switch between Alphabets (Letters) or Numbers and an HTML Table containing two cells, one for displaying the Google Map and other one for displaying the map legend.
<div>
    <label for="alphabet">
        Alphabets
        <input type="radio" id="alphabet" name="letter_number" value="1" checked="checked"
            onclick="LoadMap()" /></label>
    <label for="number">
        Numbers
        <input type="radio" id="number" name="letter_number" value="2" onclick="LoadMap()" /></label>
</div>
<hr />
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="dvMap" style="width: 600px; height: 600px">
            </div>
        </td>
        <td id = "legend">
            
        </td>
    </tr>
</table>
 
 
Alphabets (Letters) or Numbers in markers of Google Maps V3 using Custom Markers
The below script is used to display Google Maps of Mumbai city with some public places displayed on the map using markers.
The various public places are fed to the map using an array and a loop is executed inside which a marker is generated and added to the Google Map.
Depending whether Alphabets (Letters) or Numbers is chosen in the RadioButton, the text of the marker is dynamically generated.
Finally using the Google Maps Chart API, a Custom Icon is generated using the supplied text, text color and background color.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
{
    "title": 'Bombay Hospital',
    "lat": '18.9409388',
    "lng": '72.82819189999998',
    "description": 'Bombay Hospital',
    "type": 'Hospital'
},
{
    "title": 'Jaslok Hospital',
    "lat": '18.9716956',
    "lng": '72.80991180000001',
    "description": 'Jaslok Hospital',
    "type": 'Hospital'
},
{
    "title": 'Lilavati Hospital',
    "lat": '19.0509488',
    "lng": '72.8285644',
    "description": 'Lilavati Hospital',
    "type": 'Hospital'
},
{
    "title": 'Aksa Beach',
    "lat": '19.1759668',
    "lng": '72.79504659999998',
    "description": 'Aksa Beach',
    "type": 'Beach'
},
{
    "title": 'Juhu Beach',
    "lat": '19.0883595',
    "lng": '72.82652380000002',
    "description": 'Juhu Beach',
    "type": 'Beach'
},
{
    "title": 'Girgaum Beach',
    "lat": '18.9542149',
    "lng": '72.81203529999993',
    "description": 'Girgaum Beach',
    "type": 'Beach'
},
{
    "title": 'Oberoi Mall',
    "lat": '19.1737704',
    "lng": '72.86062400000003',
    "description": 'Oberoi Mall',
    "type": 'Mall'
},
{
    "title": 'Infinity Mall',
    "lat": '19.1846511',
    "lng": '72.83454899999992',
    "description": 'Infinity Mall',
    "type": 'Mall'
},
{
    "title": 'Phoenix Mall',
    "lat": '19.0759837',
    "lng": '72.87765590000003',
    "description": 'Phoenix Mall',
    "type": 'Mall'
},
{
    "title": 'Phoenix Mall',
    "lat": '19.0759837',
    "lng": '72.87765590000003',
    "description": 'Phoenix Mall',
    "type": 'Mall'
},
{
    "title": 'Hanging Garden',
    "lat": '18.9560279',
    "lng": '72.80538039999999',
    "description": 'Hanging Garden',
    "type": 'Park'
},
{
    "title": 'Jijamata Udyan',
    "lat": '18.979006',
    "lng": '72.83388300000001',
    "description": 'Jijamata Udyan',
    "type": 'Park'
},
{
    "title": 'Juhu Garden',
    "lat": '19.0839704',
    "lng": '72.83388300000001',
    "description": 'Juhu Garden',
    "type": 'Park'
},
{
    "title": 'Sanjay Gandhi National Park',
    "lat": '19.2147067',
    "lng": '72.91062020000004',
    "description": 'Sanjay Gandhi National Park',
    "type": 'Park'
}
];
window.onload = function () {
    LoadMap();
}
function LoadMap() {
    var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    var latlngbounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
    var legend = document.getElementById("legend");
    legend.innerHTML = "";
    var useAplhabets = document.getElementById("alphabet").checked;
    var start_letter_code = useAplhabets ? 97 : 1;
    var marker_color = "009BEE";
    var marker_text_color = "FFFFFF";
    for (var i = 0; i < markers.length; i++) {
        var character = useAplhabets ? String.fromCharCode(start_letter_code).toUpperCase() : start_letter_code;
        start_letter_code++;
 
        var data = markers[i]
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title,
            icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + character + "|" + marker_color + "|" + marker_text_color
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent("<div style = 'width:100px;height:40px'>" + data.description + "</div>");
                infoWindow.open(map, marker);
            });
        })(marker, data);
        latlngbounds.extend(marker.position);
 
        legend.innerHTML += "<div style = 'margin:5px'><img align = 'middle' src = '" + marker.icon + "' />&nbsp;" + marker.title + "</div>";
    }
    var bounds = new google.maps.LatLngBounds();
    map.setCenter(latlngbounds.getCenter());
    map.fitBounds(latlngbounds);
}
</script>
 
 
Screenshots
Google Maps V3 displaying Custom Markers with Alphabets (Letters)
Display Alphabets (Letters) or Numbers in markers of Google Maps V3
 
Google Maps V3 displaying Custom Markers with Numbers
Display Alphabets (Letters) or Numbers in markers of Google Maps V3
 
 
Demo
View Demo
 
 
Downloads
Download Code