3.5 Metro Web – Changing the default map icon

By now we have become accustomed to seeing the default google map icon. However, we want our projects to look good and feel original. While it is very easy to modify the icon to a different image, there are a few things that need to be taken into consideration.

First, the size of the icon is very important. By default, all google icons are set to 32 pixels by 32 pixels, so if you are going to author your own custom icons, it is best to create them at this size. Note that center bottom location of the icon is where the latitude longitude point will be based on.

default icon

default icon

Luckily for us, there is a great open source icon project community that has created thousands of google map icons for anybody to use.


Here you can choose and download icons for free, and use them in your maproom. For example, for the bus stop locations, you can choose the following icon:

bus icon

bus icon

To add this icon to your maproom, you must first download it to your harddrive, and then upload it to your BOL server.

  1. go to http://mapicons.nicolasmollet.com/
  2. find a “bus” icon, right click, and “save image as”
  3. use FileZilla to copy the bus.png file to your ftp web space

Now that you have the desired icon on your web space, you can use it on your maproom. You will add just one extra parameter to the createStop function to designate an icon (line 14 below). Make sure you do not forget to add a comma to the line just above it.

Leave a Reply