Using Custom Icons

Tags: Tutorial, Google Maps

The GoogleMarker uses a default red bubble shaped icon when no custom icon is specified. However if you want something a little more personal or unique you can create your own custom icons. This tutorial shows you how to set up custom icons for your markers. All code samples target the licensed version, but should be usable in the free version too.

To create a custom icon you will need some graphic files to represent the icon. As a bare minimum you will need one icon image, but preferably also a shadow image. Make sure that the image you use is not copyrighted to anyone else! It is also polite to copy the image to your own server so as not to burden someone elses server.

When you have the graphic file you can create a custom icon simply by using the GoogleIcon constructors. There is generally no need to change any of the values after the icon creation. The constructors could look like this (for an icon without and with a shadow image respectively):

GoogleIcon i1 = new GoogleIcon(
"iconNoShadow",
"http://www.reimers.dk/iconimage.png",
new GoogleSize(15, 15),
new GooglePoint(7, 8),
new GooglePoint(7, 8));

GoogleIcon i2 = new GoogleIcon(
	"iconWithShadow",
	"http://www.reimers.dk/iconimage.png",
	"http://www.reimers.dk/shadowimage.png",
	new GoogleSize(15, 15),
	new GoogleSize(20, 15),
	new GooglePoint(7, 8),
	new GooglePoint(0, 8),
	new GooglePoint(7, 8));

Once the icon has been created it must be added to the map's icon collection in the usual way:

GoogleMap.Icons.Add(i1);
GoogleMap.Icons.Add(i2);

One thing to note about icons is that they must be added to the map's IconCollection when the page is rendered in order for the icons to be available for use. The icons don't have to be used immediately, but they must be present at render time so that markers added later can reference them. A GoogleMarker can either set the reference to the icon directly in the contructor by setting the GoogleMarkerOptions to the set value or the GoogleMarkerOptions.Icon can be set later, like so:

GoogleMarker m = new GoogleMarker("myMarker", 55, 0, new GoogleMarkerOptions(i1));

There is nothing complicated about custom icons. The tricky bit is getting icon images you can use.

Latest Tweets