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:
300 dpi PNG files of these symbols, annotated (376k) and unannotated (84k) can be downloaded.
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:
- Open the file of symbols (mm_symb.png).
- Zoom to your symbol of choice.
- Use the Rectangular Select tool to select a box around the symbol.
- Copy.
- From the File menu select New: select Transparent background and, under the templates menu, select Clipboard.
- 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.
- Hit Save As… and name the file; under Select File Type choose PNG Image.
- Hit Save.
•••••••••••
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
The symbol, and any other symbols you add, will be stored under the My icons link.
Your new symbol with a transparent background should show up on the map:
Tip: when using My Maps, you can map out an existing KML or KMZ file of placemarks by entering a URL to the file in the search maps box (then hit enter). A KMZ file to test is here:
Click on Save to My Maps. Unfortunately, you can’t easily edit the Placemarks! Something for the Google folks to work on.
Update 10/22/08: see Map Animation with Google Earth (Google Document) for related information.
Hey John,
Just a quick comment. terra IMS just released a new ‘mapicon Factory’ where users can generate map icons quite easily. There’s free and extended (subscription) icon sets.
http://www.terraims.com/dmapicons to try it out for yourself.
Cheers,
Andres
Hi John,
Thanks so much for the detailed descriptions, links to freeware, etc. I can’t tell you how much this has helped!
Best wishes,
erin
I just tried the TerraIMS link – they have gone out of business, but the Map Icon Factory is still available at:
http://www.cartosoft.com/mapicons/
Cheers, Tracy
Heyy thanks for the info :)
Hello
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.
See the rest of the icons here : http://code.google.com/p/google-maps-icons/
Regards,
—
Nico
[…] que podíamos insertar eran muy sencillos, y poco a poco se han realizado tutoriales sobre cómo personalizar los iconos o creando librerías de iconos […]
[…] Google’s default map pin marker can certainly be replaced by any kind of marker you want (see Custom Map Symbols in Google Maps) but who wants to futz around with […]
Hi Thanks for this!
Does this allow you to create a custom map and then allow any user to place a “pin” on the map which stays there?
Thanks
No – this is the process for creating a map pin design other than the generic designs offered by Google.
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.