• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1156
  • Last Modified:

Add a letter (A,B,C, etc) to a Google Map Marker

How can I use a STANDARD Google Map Marker & cause a different letter (A, B, C, etc.) to be superimposed on the marker?

Is it possible to use the "standard" marker & change it's color?

My code is in the code window.

Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test Geocoding Appts</title>
<style type="text/css">
.maintable
{
	width:100%;
	background-color:#fff;
}
.maintable td
{
	vertical-align:top;
}
	.pt18 {font-size: 18pt; font-family: Arial}
	.pt14 {font-size: 14pt; font-family: Arial}	
	.pt12 {font-size: 12pt; font-family: Arial}
	.pt11 {font-size: 11pt; font-family: Arial}
	.pt10 {font-size: 10pt; font-family: Arial}
	.pt8  {font-size: 8pt; font-family: Arial}
	.pt9  {font-size: 9pt; font-family: Arial}	
	.pt7  {font-size: 7pt; font-family: Arial}
</style>		
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAH82qcpE-n4Sa6uJ45nihgxQmxjvj1xUHQRzNiSXUnkhbPQTbbxTo2fquIiNtppisdZ_VE_i29EBvWA" type="text/javascript"></script>
<script language="JavaScript">	
<!--	
	var URL = unescape(location.href);
addrs = new Array();
	addrs[0] = "1356 N Crestline, Wichita, KS";
	addrs[1] = "1424 S Maize Rd, Wichita, KS";
	addrs[2] = "11415 Taft, Wichita, KS";
	addrs[3] = "9221 Suncrest, Wichita, KS";
	addrs[4] = "1837 Valley View, Wichita, KS";
	addrs[5] = "330 Kennedy, Wichita, KS";
	addrs[6] = "14915 Valley Hi Cir., Wichita, KS";
	addrs[7] = "12561 Hardtner, Wichita, KS";
	addrs[8] = "102 N Wood, Wichita, KS";
	addrs[9] = "2926 W Columbine, Wichita, KS";
	addrs[10] = "856 Country Acres, Wichita, KS";
	addrs[11] = "P O Box 75511, Wichita, KS";
	addrs[12] = "3529 S. Hiram, Wichita, KS";
	addrs[13] = "11004 W Binter, Wichita, KS";
	addrs[14] = "8210 W Aberdeen, Wichita, KS";
	addrs[15] = "5801 W 41st Cr S, Wichita, KS";
	addrs[16] = "1841 N. Valleyview, Wichita, KS";
	addrs[17] = "3026 N Topaz, Wichita, KS";
	addrs[18] = "543 Fawnwood Ct, Wichita, KS";
	addrs[19] = "1319 Covington Cir, Wichita, KS";
	addrs[20] = "221 N. Parkdale, Wichita, KS";
	addrs[21] = "503 N Wheatland Pl, Wichita, KS";
	addrs[22] = "4232 W Central, Wichita, KS";

 	var map = null; 
    var geocoder = null;
    var bounds = new GLatLngBounds(); 

    var geocoder;
    var currentAddress;
    function initialize() {
      if (GBrowserIsCompatible()) { 
        map = new GMap2(document.getElementById("map"), 100); 
        map.addControl(new GSmallMapControl()); 
        map.addControl(new GMapTypeControl()); 
        map.setCenter(new GLatLng(37.665, -97.327), 13); 
        geocoder = new GClientGeocoder(); 
      
        geocoder.getLocations(addrs[0], addMarkerToMap);
        currentAddress = 0;
	  	}	
	  }			
    
    
    function addMarkerToMap(response){
        
        // Retrieve the latitude and longitude
        try{
            place = response.Placemark[0];      
            point = new GLatLng(place.Point.coordinates[1],
                                place.Point.coordinates[0]);
            
            //show larger view
            if(currentAddress == 0) map.setCenter(point, 9);
            //extend bound
            bounds.extend(point);        
            
            //add to map
            map.addOverlay(createMarker(point,place.address));
        }catch(e){
            document.getElementById('mapProcInfo').innerHTML = 'Error while geocoding. Address is invalid!'
        }
        
        //if we got more address call this function again
        if(addrs.length>(currentAddress+1)){
            currentAddress++;
            geocoder.getLocations(addrs[currentAddress], addMarkerToMap);
            document.getElementById('mapProcInfo').innerHTML = 'Processing markeres. Please wait: ' + (currentAddress+1) + '/' + addrs.length;
        }else{
            //hide info and zoom map to markers
            document.getElementById('mapProcInfo').innerHTML = '';
            map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));
        }
    }

    function showAddrSngl(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(address);
            }
          }
        );
      }
    }	
        function showAddress(address,number) { 
            if (geocoder) { 
               geocoder.getLatLng(address, 
                   function(point) { 
                        if (!point) { 
                                alert(address+" not found"); 
                        } else { 
                             if(number==0) { 
                                 map.setCenter(point,9); 
                             } 
                             var marker = createMarker(point,address); 
                             map.addOverlay(marker); 
                             bounds.extend(point);
                             map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));
                        } 
                   }); 
             } 
        }//end of function showAddress 
 
        function createMarker(point,address) { 
           var marker = new GMarker(point); 
           GEvent.addListener(marker, "click", 
                function() { 
                    marker.openInfoWindowHtml("<b>"+address); 
                }); 
           return marker; 
        }//end of function createMarker  			
// -->
</script>	
</head>

<body onload="initialize()" onunload="GUnload()">
<div class="pt14"><b>Appointments on a map for 11/16/10</b></div><br>

		<table class="maintable">
			<tr>
				<td>
                    <div id="mapProcInfo"></div>
                    <div id="map" style="width: 650px; height: 450px"></div>
                </td>
			</tr>
		</table>			


</body>

</html>

Open in new window

0
Richard Korts
Asked:
Richard Korts
1 Solution
 
Molnar IstvánHelpDesk / ProgrammerCommented:

to create a custom marker with wizard and generate code:
http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/1.1/examples/markericonoptions-wizard.html (selecting label marker from types you can add a label text)

to create a custom marker from image:
http://www.powerhut.co.uk/googlemaps/custom_markers.php

here are the iconpacks from google:
http://code.google.com/p/google-maps-icons/wiki/NumericIcons#Lettered_Balloons_from_A_to_Z,_in_10_Colors
http://code.google.com/p/google-maps-icons/
http://www.visual-case.it/cgi-bin/vc/GMapsIcons.pl

hope i understand correctly your question
0
 
Richard KortsAuthor Commented:
That helps, I had already figured it out, appreciate the response.

Stay tuned for likely more Google Maps API Questions.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now