StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h1>MapIconMaker: a library for Google Maps v2</h1> <p>One way is to use the <a href="http://gmaps-utility-library-dev.googlecode.com/svn/tags/mapiconmaker/1.1/" rel="nofollow noreferrer">MapIconMaker</a>. There's an example <a href="http://gmaps-utility-library-dev.googlecode.com/svn/tags/mapiconmaker/1.1/examples/createmarkericon-simple.html" rel="nofollow noreferrer">here</a>. Google Maps default icons are 20px width and 34px height, so you could use something like this to emulate:</p> <pre><code>var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"}); var marker = new GMarker(map.getCenter(), {icon: newIcon}); </code></pre> <p>You could even wrap it in some function to make things even easier on yourself:</p> <pre><code>function getIcon(color) { return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color}); } </code></pre> <p>That's what I personally use for all markers I create. I prefer to have the option to change colors of a whim.</p> <p>Update: The Hex color of the default icon is "#FE7569". Also, you can setImage on a Marker rather than creating a new Marker with a new icon. So if you want a function to highlight you could go with something like this, using the function above:</p> <pre><code>function highlightMarker(marker, highlight) { var color = "#FE7569"; if (highlight) { color = "#0000FF"; } marker.setImage(getIcon(color).image); } </code></pre> <h1>StyledMarker: a library for Google Maps v3</h1> <p>Since V2 was replaced by V3 sometime ago I thought I should update this answer. I created a library for custom markers that can be found on the V3 Utility Library <a href="https://github.com/googlemaps/v3-utility-library/tree/master/styledmarker" rel="nofollow noreferrer">here</a>. It allows for different colors and shapes, and you can place text on the marker as well. It works by using the Google Charts API which has methods for creating Google Maps type markers. Feel free to look at the source code if you'd rather use the Google Charts API directly.</p> <p>The thing about that library, however, is that it takes care of defining the clickable regions of these marker images for you, so, for instance, the longer bubble with text will have the clickable regions one expects, like <a href="https://github.com/googlemaps/v3-utility-library/tree/master/styledmarker/examples/elevation.htm" rel="nofollow noreferrer">this example</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload