Google Map Custom Marker Maker for v3 API

November 18, 2010 Posted by Graham as Google Maps API

Google Map Custom Marker Maker For API v3

Finally it’s here. I’ve updated the Google Map Custom Marker Maker so that it is now compatible with Google Maps Javascript API v3.

The principle is the same, upload an image (png, gif, jpg) and this free on-line tool creates the Google map shadow and suggests an array of x,y pixel coordinates that defines the clickable area of your custom icon.

Transparency of the original image is preserved. You get to see your image as a marker on a map and are presented with a zipped package for download that contains the generated images and some sample code.

An easy way to make an icon shadow for Google Maps API v3

Feedback and comments are welcome! I would love to see some sites where your generated custom markers are in action.

Update 20/02/2011: The zip archive created should now extract on Mac systems as intended. Many thanks to all of you that highlighted the situation to me in the first place.

API v3, Icons

Solv9kr

WOW updated! Then How to make marker for v2 api? Are u don’t support v2 now?
http://www.powerhut.co.uk powerhutcouk

HI

The V2 API version has been moved to http://www.powerhut.co.uk/googlemaps/custom_markers_v2_API.php.

I will place a link to it on the v3 page. Thanks for the comment
Chris K

Nice. Is the source code available? Would be nice to host this on our intranet.
http://www.powerhut.co.uk Graham W

Hi Chris. Nope sorry, source code not available as was more of a personal project than having a well commented and organised code layout. Feel free to use it as much as you like though!

The v2 API version was created a while ago on a different web host using the GD library and the v3 API version uses the Imagick class (http://www.php.net/manual/en/class.imagick.php)

On my previous web host, Imagick was not an available option…. yet as this is now hosted on one of the hosting packages I provide .. that restriction no longer applies :)

The v3 API Imagick produces a better shadow too I think
http://wildobs.com Adam Jack

Thanks, great tool. I had problems downloading the zip (I got it, but my MBP failed to decompress it.)
http://www.powerhut.co.uk Graham W

Hi Adam. Love your site by the way.. great opportunity for custom map markers there!

The files are archived on the server using a zip class that I’ve been using for the last 5 years or so. It looks like it may be time for me to find a more suitable alternative.

Does MBP = Mac Book Pro? If so, I am unable to duplicate and test my end as a neither own or use a Mac. In the meantime, I have read that http://www.stuffit.com appears to be pretty useful for Mac owners. Yet as I have no personal experience myself, I am unable to comment any further.

On my list is now to try a different zip class.
will

mac 10.6 will not unzip the archive I download – “Unable to unarchive “custom-marker_220111-173424_XUK6T2.zip” into “Desktop”. (Error 1 – Operation not permitted.)
http://www.powerhut.co.uk Graham W

Hmm yes ok.. Looks like we’re back to the same problem that the zip file created does not seem to be Mac friendly. I have found a couple of php zip classes that say they work on both PC and Mac, yet I have not tested yet.

Does anyone have a link to one that definitely works or can give some specific feedback to whether http://www.stuffit.com is able to extract the archive ok for a Mac?

In the meantime WIll, the zip file is only really there for a bit of added convenience. The images needed and the sample piece of code are also shown directly on the page, so you could grab them straight from there if needed.
http://www.facebook.com/people/David-Treering/20009870 David Treering

This just saved me hours of work in photoshop! Thank you sooooo much!
http://www.facebook.com/btoet Boris Toet

Amazing script, saved me a lot of work!
http://www.chaim.com tinjaw

This is great. Just what I needed.
http://zendak.myopenid.com/ Ray

Fantastic work, Graham! Very handy, and high quality, accurate results. Thanks for offering this.
Greg

thanks for this script, I used it to create all markers for my world tour website http://www.nomadsroad.com , it look very nice now! Thanks again!
Greg
Gabriel

Hi There, i have alle the images now but no idea how i can implement that code so that my marker is available online.

Thanks for any advice!
http://www.powerhut.co.uk Graham Washbrook

Hi Gabriel,

In the zipped download there is a demo.html file. If you extract the generated archive to your desktop or web root (keeping the folder structure intact) and open this page, you should see your custom map marker in action.

Have a look at the source code and explore the links to the Google API reference documentation for further information and see how you get on.
Kasper

Awesome tool, I’ve had difficulty with positioning everything in the past but this saves a lot of headaches. And the shadow generation is very nice as well!
Frank

If you have multiple markers, using a time-stamp, is there a way to order which one is on top in a cluster of markers? Right now, it’s oldest time-stamp on top, newest buried underneath. Here’s a screen-clip to show better what I mean perhaps. The 2min is red, older, brown:

http://eagleeyecomputer.com/images/mapmarkers001.png

frank
http://www.powerhut.tel Graham Washbrook

Hi Frank,

You might like to take a look at the zIndex property of the MarkerOptions object and the setZIndex method of the Marker class

http://goo.gl/0tpFG

“All markers are displayed on the map in order of their zIndex, with higher values displaying in front of markers with lower values”
http://fernandoguillen.info Fernando Guillen

Very useful tool, it saved me to pass through unpleasant work.. Donation on the way. Thanks.
Deanne

What a great tool! I’d already made my own markers and found this…fast, efficient, beautifully coded, so easy to use my granny could do it. Well, if I still had a granny.
http://www.powerhut.tel Graham Washbrook

Many thanks Fernando – much appreciated! Am glad you found it useful
S Vogel

Awesome icon maker. Very simple to use and the output looks great. Just downsize an image, upload to the page, and you’re done. Many thanks!
V Bunjes

thank you, easy to use and effective
Troy Wilson

Got the map and my marker to work perfectly. Thanks! Its was a real time saver. If I wanted to add multiple markers to the map using the same icon is that possible? How would you go about doing that? I have seen some code each marker has its own latitude and longitude but your code only used the map location at the start. Is there an easy way to modify this? Cheers!
Opabinia

Thanks so much for your neat application. It simplified my life considerably since my knowledge of gimp is pretty limited. you’re the dude.
http://www.facebook.com/danielkleindesign Daniel Klein

Hey all, I have a similar question to Gabriel here I think. I used the Google Maps site to create an embedded custom map—I guess this is a different method than using the API to code my own app. On the Maps site, an option for using a custom icon is available, and I can host the image on the site where I’m embedding the map. However, that function just isn’t working – there is no response from the site when I paste in the URL of my image, and the plain google icon is all that shows up.

I created a custom icon using this tool, and would like to be able to use it on my embedded map, but I do not understand where I should put the folder or the code that was provided.

Can anyone explain please?
http://www.powerhut.tel Graham Washbrook

Hi Daniel, the code supplied purely relates to the use of the custom marker with the API rather than an embedded Google map.

However, as you say, if you are able to host the icon image, then you would be able to use it as a custom icon for the embedded map.

The situation you have now, where the custom icon is not currently showing on an embedded Google map may be related to this known bug (*guesses*) It fails for me in FF, yet works in IE

https://bugzilla.mozilla.org/show_bug.cgi?id=702578

Have you tried doing the same in various browsers?
disgustedoftunbridgewells

Hi

I’ve been wondering the same thing. I know nothing about either the GoogleMaps API or javascript, but the demo.html file makes things look a lot less scary than I thought they might be.

But the cheater’s option is to take the combined.png – put it somewhere like your dropbox public folder then copy the public link to your clipboard. Then go to MyMaps on maps.google.com and either create a new map or edit an existing one, add a placemarker, click on the icon and then ‘add icon’. Paste in the URL of your custom icon and you’re good to go.

There’s an issue with Firefox 8 (instructions on how to fix here: http://mapicons.nicolasmollet.com/faq/) which means that for your final version hosting markers on dropbox etc isn’t an option at the moment – but dropbox is OK for experimenting.

AndyM
Dr Teck

Thank you for this tool. I have a general question: is it a known “problem” with Google Maps that when you zoom way out in a map (say to the level of continents) that map markers are shifted from their proper location; as you zoom in, the markers become more-accurately positioned? For example, on your own page: http://powerhut.co.uk/googlemaps/custom_markers.php Zoom out far enough and the marker appears over Germany,zoom in a bit and it’s in Belguim, zoom in more and it’s in the UK.
http://www.benripley.com/ Ben Ripley

Much appreciated. I was able to use this on a current project. What a time-saver!!!
Einar

useful and handy tool, thank you!
Dr. Schwarz

You’ve just saved me a LOT of time. Thanks a bunch.
Mike

Wow, this is so slick, you even trace the image to generate a poly. What else can I say but THANKS!
http://twitter.com/MapBaker Matthew Baker

This is just brilliant! Well done! Will post the result app to show you what I did with it!
http://www.powerhut.tel Graham Washbrook

Thanks Mathew, look forward to seeing the outcome :)
chris

This site is brilliant – I have made a very modest donation as a token of my thanks and will be sending the link to all on my course.

Cheers!
http://www.powerhut.tel Graham Washbrook

Cheers Chris, thanks very much :)
Piotr

great

Powerhut Net Solutions