Changing the Bing Maps cursor in JavaScript

I know what you’re thinking. You were at the bar last night, getting your groove on, and a hot lady asks you how to use JavaScript change the cursor when hovering over a Bing Map. I feeling you, dawg. (A little Randy Jackson lingo.)

The next time this happens to you, you can grab a napkin and write out this code:

document.getElementById("mapDiv").childNodes[0].style.cursor = "crosshair";
document.getElementById("mapDiv").childNodes[0].style.cursor = "pointer";

mapDiv, in case you are wondering, is the div tag that stores the map:

<div id='mapDiv' style="position:relative;height:550px;"></div>

This has assumed you have loaded the map into your map control in the first place:

          function GetMap() {
              map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                           { credentials: "my-creds",
                               center: new Microsoft.Maps.Location(42.73, -84.52),
                               mapTypeId: Microsoft.Maps.MapTypeId.road,
                               zoom: 14

That’s it! Go represent, because now you’ve got mad knowledge.

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: