Home Help Contact Fonts

So you want a custom icon on your web site, or on your map, but you don't feel like generating lots of image files for this? Moreover, you want to add some text to your icons, and you would like to do so programmatically? Then this is the right place for you.

The first step is - of course - preparing your icon, and uploading it to this website (on our main site). Remember that all files with width or height larger then 48px will be scaled to fit. Also, animated gif files aren't supported.

If your upload is successful, you will receive two url-s. The first one is a direct link to your uploaded (and scaled) image. You can use it on your site, but it is just a static file.

The second one is where the magic starts. It's an url to our sites /ico view, with additional parameter file. However file is not the only parameter this view accepts. The second important one is called txt. Yes - this is where you put your text. Something like this:

http://markericons.eu/ico?file=e1x1a1m1p1l1e.png&txt=Hello World!
. Note that you can't use the & sign in your text - if you need to, you must replace it with %26. Another limitation is that you can't add text longer then 50 chars - but it's still pretty cool.

You can still change the size of your icon. All you need to do is to provide parameters w=16 or h=16. Resizing will always keep the proportions of your image, so specifying both parameters is usually pointless.

Ok - but you got black text, with your image centred under it. Suppose you want your text on the right side of image. Well - all you need to do is to add another parameter to your url - a=right. Like this:

/ico?file=e1x1a1m1p1l1e.png&txt=Hello World!&a=right
Guess what - you can also use a=left! That was something totally unexpected!

Furthermore, you can put your text above the image, by adding va=top, or under the image, by adding va=bottom.

Getting better, but the letters are a bit to small. What can we do? Cry, or add another parameter - fs=24. The largest acceptable font size is 24.

But what if you don't like black letters? Then you're weird. But that's ok. We can handle weird people. That's why you can add another parameter: fc=255_0_0. If you're wondering what these numbers are - they are RGB values. If it doesn't ring a bell, then read this article.

So now you donn't like my font? Then chose your own. For example like this f=GreatVibes-Regular. You can find a list of supported fonts here.

There are two more parameters available: vo - vertical offset, ho - horizontal offset. You probably guessed by now what they do (if you didn't - you probably shouldn't use them anyway). Clearly allowed offsets are limited (+-100px).


One thing worth mentioning is that the order of parameters isn't important. You can specify them the way that's most convenient to you.

So if you want to add marker, with text to your google map, you can do it like this:

var txt = 'Hello World!'
var image = {
  url:'http://markericons.eu/ico?file=e1x1a1m1p1l1e.png&txt='+txt
};

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: image
})
For more details on using google maps see their documentation.


© Witek "Cosiek" Majchrzak