Putting Custom Text on a Google Maps Marker Image
If you've ever done anything with Google Maps, you may have dabbled with custom icons. For example, you can have the default image of http://www.google.com/mapfiles/marker.png by not supplying a custom image. Or, if you've ever done a search on Google, you may have noticed markers with a letter on it, like http://www.google.com/mapfiles/markerA.png.
A client had me write an implementation of Google Maps that maps distributors of their products. Afterwards, they asked if they could make custom markers. Their developers noticed some code I had:
var customIcon = new GIcon(G_DEFAULT_ICON);
if('< % Response.Write(MarkerIcon); % >' == '')
{
var letter = String.fromCharCode("A".charCodeAt(0) + currentIndex< %=this.ClientID% >);
customIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
markerOption = { icon:customIcon };
var marker = new GMarker(point, markerOption);
}
Where "point" is what was returned from getLatLng(); and MarkerIcon is a content-managed property. This would be called if they never picked a custom icon from the content management system.
Their developers were wondering if they could just put whatever into that image URL and have it print out. Like http://www.google.com/mapfiles/markerWHATEVERIWANT.png and it would superimpose "WHATEVERIWANT" on top of the base marker. I told them that it doesn't work that way: Google has 26 png files and you can reference them as markerA.png, markerB.png, etc. (strangely enough, it's case sensitive...) You can't type in whatever and have them print it back to you.
The client pushed back again, wondering if it was possible, somehow. Well, I thought, I've made CAPTCHAs before, how much more difficult could this be? So, I downloaded the default marker from Google and edited it in Paint.Net to get rid of that ugly black dot in the middle. Then, I started Googling around for some quickstarts to what I was doing. I found this on CodeProject: http://www.codeproject.com/KB/web-image/AspNetCreateTextImage.aspx. It was written by a student and was all put in one huge Page_Load method, but it did most of what I wanted and got me off to a good headstart. After dinking around, I figured out how to load a base image - the blank marker file - and get transparency in the text being written, the main missing pieces. After refactoring things to make them a little easier to understand, (mainly by making a bunch of methods instead of one super Page_Load) I was all set.
I attached the code to this post, zipped up. Remember to change line 90 of the C Sharp file to wherever you put your BlankMarker.gif file.
Realize that, since the Google Marker image is so small, 20 x 34, and the marker inside of the image is even smaller, only two characters can conceivably fit inside of this particular marker. You could make a larger image, or get rid of the base image altogether, if you wanted to allow for more characters, but realize that the GIcon is meant to be 20 x 34 and you'll need to change those dimensions accordingly.
Here is a screenshot of my ImageCreator.aspx in action:
As you can see from the URL, I just typed in the page name with a query string variable of text set to "Hi" and I get a nice little Google Maps marker with "Hi" superimposed over the top. And it's transparent!
In order to set the Google Maps icon marker to the result of this page, simply say:
customIcon.image = "http://[Base Website URL]/ImageCreator.aspx?text=" + myString;
Where [Base Website URL] is your website's URL to where you put the ImageCreator.aspx file and myString is what you want it to say. Once again, any more than two characters will make this not look so good.
Happy geocoding!