Add a CSS class to markers

[tjgupta]

Does anyone know how to add a CSS class to the map marker div elements? I tried using the RichMarker JS from the Google Maps utility library (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html), which extends the OverlayView class and allows you to use any HTML you want, but I had a lot of problems getting the markers to hold their position when zooming in or out. Plus is adds tons of JavaScript to the page just to accomplish what should be a very simple task: to style markers the way you want them to be styled. I don't need any other functionality per se, just a custom style. I've fought with it in all kinds of ways, but there doesn't seem to be anyway to reference just the marker divs for CSS, and (very helpfully of course), Google doesn't identify them via any unique class.

Well, except for one hack: I added a title to the markers through the API, and then referenced it ([title="myCSShook"]) in my CSS, but that's really hacky, not very cross-browser compatible, and is adding a title (of course) to the hovers, which I really don't want or need.

This seems like a really obvious gap in the API - what am I missing?

Thanks!

[Rossko]

> This seems like a really obvious gap in the API - what am I missing?

Depending on the circumstances and the browser, markers may not be
rendered as DOM objects at all - CSS obviously wouldn't work then.

[tjgupta]

Hmm, I'm curious which circumstance or browser? And how? The maps are nothing more than nested divs and images and JavaScript currently, at least to my knowledge. In every browser I tested with (Chrome, Safari, IE7-9, Firefox), every marker is an <img> surrounded by a <div>.

Or at least it is for me, using these parameters to instantiate a marker:
new google.maps.Marker({
                    map: map,
                    position: location,
                    icon: {
                        url: '/path/to/my/image.jpg',
                        scaledSize: new google.maps.Size(40, 40),
                        anchor: new google.maps.Point(20, 58)
                    },
                    draggable: false,
                    raiseOnDrag: false,
                    clickable: true,
                    shape: [0, 0, 40, 40],
                    title: 'spot'
                });

I'm definitely interested to hear more about this if you have some time... If that's true, it will break my current workaround for this issue.

Here's what I'm doing in my CSS:
[title="spot"] {
    background: url(/my/custom/image/bg/) no-repeat;
    height: 62px;
    width: 48px;
}

Thanks for your help!

[Rossko]

> Hmm, I'm curious which circumstance or browser? And how?

The API will render markers as Canvas objects when it can. I don't
know which browsers it considers to have enough Canvas support.

[Rizwan Ali]

Hi,

I have recently solve this problem.

First customize your google marker and then add a css class on DIV
element during the draw function.
for your reference:

create a javascript class name as CustomMarker. Add a css class in its
draw function like this.

CustomMarker.prototype.draw = function() {
var me = this;
// Check if the div has been created.
var div = this.div_;
var title = this.title_;
var latlng = this.latlng_;
// var cursor = this.cursor_;
var severitycheck = this.title_;
var eventT= this.localeventTitle;
//alert(eventT);
if (!div) {
// Create a overlay text DIV
div = this.div_ = document.createElement('DIV');
div.id = this.id_;
div.title = title;
div.latlng = latlng;
div.className = 'ring_small_green';
}
}

for more details.
http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html

if you have any question let me know!