Dynamic icon and marker Builder for Google Maps API

2008 November 3
tags: , , , , , , , , , , , , , , , , , , , , , ,
by Matt Bernier

I was building an icon for a map, and had to refresh the page every time I wanted to test a change to the marker. Specifically, I was trying to change the placement of my marker in relation to the dragCross image. I must have refreshed the page fifty times.

So that I never have to do that again, and neither do you, I have made a script that allows you to make an icon/marker set and play with it all without refreshing the page.  Just put in your parameters, and hit the button.

Also, as a bonus, when the script builds the marker, it will provide you with the JS you need to actually create the marker on the map.

Icon Marker Builder Screenshot

Icon Marker Builder Screenshot

Check out the Google Maps Dynamic Icon Marker Builder.

I Love Social Bookmarking
SubscribeDiggdel.icio.usFacebookFurlRedditStumbleUponTechnorati
Sphere: Related Content

from → Mapping, js

11 Comments leave one →
2008 November 3
Seoclear » Generate Icons and Markers for your google map UNITED STATES WordPress 2.5.1 permalink

[...] Dynamic GIcon and GMarker Builder Sphere: Related Content Bookmark to: [...]

Pingback
2008 November 6
Ajaxian » Google Maps Utilities for Creating Markers and Loading KML UNITED STATES WordPress 2.6 permalink

[...] The first is a web-based interface for playing around with putting custom markers on a map (i.e., the GIcon and GMarker APIs). As a bonus, the tool generates the JavaScript you’ll need as you play with the UI; there’s an associated blog entry. [...]

Pingback
2008 November 6
Ajax Girl » Blog Archive » Google Maps Utilities for Creating Markers and Loading KML UNITED STATES WordPress 2.5.1 permalink

[...] The first is a web-based interface for playing around with putting custom markers on a map (i.e., the GIcon and GMarker APIs). As a bonus, the tool generates the JavaScript you’ll need as you play with the UI; there’s an associated blog entry. [...]

Pingback
2008 November 7
Javascript News » Blog Archive » Google Maps Utilities for Creating Markers and Loading KML UNITED STATES WordPress 2.2.2 permalink

[...] The first is a web-based interface for playing around with putting custom markers on a map (i.e., the GIcon and GMarker APIs). As a bonus, the tool generates the JavaScript you’ll need as you play with the UI; there’s an associated blog entry. [...]

Pingback
2008 November 8
“CSGeoXML and gMapsIconBuilder”: Google Maps Utilities for Creating Markers and Loading KML UNITED STATES WordPress 2.6.3 permalink

[...] SiteMap November 8, 20084:48 am “CSGeoXML and gMapsIconBuilder”: Google Maps Utilities for Creating Markers and Loading KML Here’re two utilities from CloudSync for Google Maps that help in creating markers and loading KMLinteresting. The first is a web-based interface for playing around with putting custom markers on a map (i.e., the GIcon and GMarker APIs). As a bonus, the tool generates the JavaScript you’ll need as you play with the UI; there’s an associated blog entry. [...]

Pingback
2009 January 16
Pete Myers UNITED KINGDOM PHP permalink

Hi,

The code that works perfectly on your icon tester, fails miserably on my page. The default GIcon doesn’t have transparent background, and the custom icon image isn’t loading.

http://www.mjmdecorating.com/portfolio/project-map/

I’m totally confused, and amazingly frustrated (you know what web coding’s like when it just doesn’t work!). Any ideas? I’ve gone through the code, and even the css as carefully as I can, and can’t see what could be causing this.

2009 January 16
Matt Bernier UNITED STATES PHP permalink

It looks like you have done everything correctly. The only one thing I would suggest is using this image for your marker: http://maps.google.com/intl/en_us/mapfiles/marker.png instead of the one you are using or not specifying a marker image url and just using the default one from google (which is the one I linked to).

It looks like the marker you got just happened to have a background on the image.

The other thing I would suggest, is getting Firefox’s web developer plugin, and using the Images>View Image Information tool when looking at a google maps example, this will show you the location of the markers that they are using.

I am glad you were able to use my tool, and I hope this information helps!

2009 January 18
Pete Myers UNITED KINGDOM PHP permalink

Thanks Matt,

Yeah, I’m using Firefox.

The thing is pretty weird. I’ve tried a range of things, including using the default marker, … but bizarrely it works on your code generator!

Thanks for the tool… it’s bookmarked… and it’s useful to know the code is actually correct as I try to debug. Cheers for the help.

2009 January 30
Launch Your Project » Blog Archive » CloudSync Developer’s Blog UNITED STATES WordPress 2.5.1 permalink

[...] rest of the web devloper world.  They have so far discussed topics ranging from using mod_gzip, to dynamically creating custom markers for google maps, and even loading a local KML file as a single overlay on google [...]

Pingback
2009 February 17
Sam Ramsan MEXICO Windows XP Google Chrome 1.0.154.48 permalink

Hello, thanks for such a wonderful post… the thing is, I’m not that good at JavaScript and I definitely failed to implement the code in my site.. where does it go?
You see every time I put it inside the my Google map disappears from my page…

Glad you can help me.

2009 February 20
Matt Bernier UNITED STATES PHP permalink

My suggestion is to test your code using FireBug with FireFox. Or, use the web inspector in Safari. Both of these tools will give you adequate error messages back that will tell you why your code is not working. It could be something as simple as a misnamed variable or a bad semi-colon.
I hope that this information is useful to you.

Leave A Comment

Note: You can use basic XHTML in your comments. Your email address will never be published.

Subscribe to this comment feed via RSS