Question

I have a map with a bunch of pushpins and when a mouse goes over the clickable pushpins I want the cursor to change to a pointer instead of a hand. I know how to do this with CSS but none of the Pushpin elements appear to have a class defined. Does anyone know how to set the class for the pushpins? Here is what my Javascript looks like right now.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude), { icon: iconUrl, width: size, height: size });
map.entities.push(pushpin);

Answer 1

By using the Pushpin option “typeName” you can apply a style like so:

JavaScript:

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude), { icon: iconUrl, width: size, height: size , typeName: 'mypin'});<br/>

map.entities.push(pushpin);

CSS:

.mypin { cursor: pointer !important; };