How do I change the color of a GMarker in Google Maps?

Question

Pretty simple request, but there doesn't seem to be a way to do it. I just want my GMarkers to be green instead of red.

Do I really have to make my own icons?

Answer 1

See this: Map Overlays > Markers > Icons

Icons

Markers may define an icon to show in place of the default icon. Defining an icon is complex because of the number of different images that make up a single icon in the Maps API. At a minimum, an icon must define the foreground image, the size of type GSize, and an icon offset to position the icon.

The simplest icons are based on the G_DEFAULT_ICON type. Creating an icon based on this type allows you to quickly change the default icon by modifying only a few properties.

It looks like this is the simplest case. You use G_DEFAULT_ICON as the base GIcon, then extend it by altering the .image property of that new object. The simple example is pretty simple.

Answer 2

The best way I have found is with the following scripts...

labeledmarker.js

mapiconmaker.js

you then need the following code snippet:

var iconOptions = {};
iconOptions.width = 32;
iconOptions.height = 32;
iconOptions.primaryColor = "#66CC6600";
iconOptions.cornerColor = "#66CC6600";
iconOptions.strokeColor = "#000000FF";
var iconSeller = MapIconMaker.createMarkerIcon(iconOptions);

function createMarker(icon, point,html,label) 
{
    opts = 
    { 
        "icon": icon,
        "labelText": label,      
        "labelClass": "markerLabel",
        "labelOffset": new GSize(-4, -31)
    };
    var marker = new LabeledMarker(point, opts);
    GEvent.addListener(marker, "click", 
        function() 
        {
            marker.openInfoWindowHtml(html);
        });
    return marker;
}

Make sure you have a class in your stylesheet called markerLabel so you can style the div which contains the label. I pinched most of this code from the excellent econym tutorial site where there are many clear examples and code samples.

Answer 3

This is the simplest method:

var greenIcon = new GIcon(G_DEFAULT_ICON);
greenIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png";
var markerOptions = { icon:greenIcon };

var marker = new GMarker(point, markerOptions);

That marker image is Google's, but you could also use your own.

MapIconMaker is great if you need to generate unique markers on the fly.