I have been massively sporadic blogging recently – no excuses – I just have…

I have been using the v7.0 of the bing maps ajax controlon a project and wanted to set the cursor on mouse hover of a Pushpin. The idea was that as we had changed the default marker to a different size, and had a click event to show details we needed some way to give the user feedback that the pin was clickable. Pretty standard stuff. Cool thing is that this version made this a total doddle… Short post then!

Looking at the rendered source the ‘map’ element has a MicrosoftMap class and sets the cursor as style on this element

<div class="MicrosoftMap" style="z-index: 0; overflow-x: hidden; overflow-y: hidden; 
background-color: rgb(255, 245, 242); position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; 
cursor: url(http://ecn.dev.virtualearth.net/mapcontrol/v7.0/cursors/grab.cur), move; ">

so adding the two handlers

Microsoft.Maps.Events.addHandler(pin, 'mouseover', pinMouseHover);
Microsoft.Maps.Events.addHandler(pin, 'mouseout', pinMouseHover);

then the handing code including a simple bit of jQuery to select by the class

function pinMouseHover(e) {
    var cursor = (e.eventName === 'mouseover') ? 'pointer' 
        : 'url(http://ecn.dev.virtualearth.net/mapcontrol/v7.0/cursors/grab.cur), move';
    setMapCursor(cursor);
}

function setMapCursor(cursor) {
   $('.MicrosoftMap').css('cursor', cursor);
}

and it’s sorted. Doddle – told you…