Solved

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

Posted on 2010-11-16
2
1,133 Views
Last Modified: 2012-05-10
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
Comment
Question by:Richard Korts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 13

Accepted Solution

by:
Molnar István earned 500 total points
ID: 34153549

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
 

Author Closing Comment

by:Richard Korts
ID: 34154867
That helps, I had already figured it out, appreciate the response.

Stay tuned for likely more Google Maps API Questions.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
MySQL and Geo based Data 2 706
Google - getting coordinates 6 615
Old GPS chip on Samsung Tab 4 - Kit Kat? 2 78
Help on iPhone Siri when locations and reminders 5 103
I feel like more and more people want to know how to programmatically convert addresses into geospatial locations. So in this article, I will show you how you can do it with Bing Maps. I'm going to use PowerShell, which is a nice scripting language,…
Introduction This article is designed to assist GIS (Geographic Information System) and GPS (Global Positioning System) developers using ESRI ArcGIS and other spatial information management systems.   For the uninitiated the concept of projectio…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question