Resources and Ideas for Making Maps

Custom Map Symbols in Google Maps

Google’s My Maps allows the easy creation of pseudo map mash-ups, where you can map your own data as points, lines, and area symbols with Google Maps as the background.

I wrote about My Maps – basic how-to and some of its limits – in another blog post, Allelopathic Maps & Google’s “My Maps.” One of the My Maps limits, the inadequate and corny set of available map symbols, has been removed: you can now create and use your own map symbols in My Maps.

To work with My Maps you need a Google account, and to use custom symbols (icons, as Google calls them) you need some server space to upload your symbols: you must provide a URL to the symbols. You should be able to find a free web hosting service that allows hot-linking (the placement of an image hosted on the free site in a My Maps map in this case). You can also embed images in the pop-up balloon associated with points, lines, and areas on My Maps, and you need server space to host those files.

In Custom Icons for Your Maps, a posting on the official Google Earth/Maps blog, PNG files with transparent backgrounds are recommended, although JPG and GIF should also work. PNGs and GIFs can have transparent backgrounds, essential if you don’t want a white box surrounding your symbol. As Google says PNG, lets PNG.

You can use or modify an existing symbol or create your own. A bunch of curious map symbols, for example, preface the map symbol chapter in the Making Maps book:

Many graphics software packages allow you to grab a single symbol and save it as a PNG file with a transparent background. Two well regarded, easy-to-use, and free software options, for the Mac and PC, are detailed below.

•••••••••••

If you are using a Mac, try Seashore. Download the open-source, free software here. We will work with the unannotated PNG linked above. There are several routes through Seashore to a transparent PNG, here is one:

From the Selection menu choose Anchor Selection.Save the file as a PNG.

To remove the white background, and thus make the file background transparent, grab the Color Selection (or magic wand) tool and click on the background color (white in this case).

Hit delete.

Hit Save As… to resave the file.

You should be able to look at the file on your computer desktop to make sure the background is transparent.

•••••••••••

If you are using Windows, try GIMP. Download the open-source, free software here. Again, we are working with the unannotated PNG linked above. There are several routes through GIMP to a transparent PNG, here is one:

Open the file of symbols (mm_symb.png).

Zoom to your symbol of choice.

Use the Select Rectangular Regions (Rect Select) tool to select a box around the symbol.

Copy.

From the File menu select New.

Under Advanced Options and Fill with: select Transparency and hit OK.

Paste.

To remove the white background, and thus make the file background transparent, grab the Select Contiguous Regions (magic wand) tool and click on the background color (white in this case).

Hit Cut. You may have to select white interior areas and Cut them also; make sure the checkered background (indicating transparency) fills all areas you want transparent.

Upload your symbol to your server space, and note the URL of the symbol. You can open the URL to the symbol in a browser to make sure it works. Go to My Maps and add a Placemark and edit it (or edit an existing Placemark). Click on the icon (the red map pin in this case):

Click on the Add an Icon link and enter the URL to your map symbol. If you want to try the symbol I created, the URL is

I am contacting you because I am the creator of “Map icons collection”, and I thought you might be interested in talking about my project in your blog.

Map icons collection is a pack of 300 free icons for your placemarks. You can put them manually in your Google Maps with the “My maps” feature, or automaticly with the Google Maps API.
Organized in color categories, you will get a complete collection of icons, such as cinema, school, bank, japanese restaurant and clothes store.

Thank you…thank you…png…who knew! I tried uploading gif and jpg files with the backgrounds removed and every time I imported the icon mymaps added a background…this was driving me crazy until I saw your article.