Bing Maps Pushpin appearing below where they should be

I was working the Bing Maps, adding a custom pushpin to a map, and the pushpin was being added below the point on the map I was clicking on. Which was frustrating, until I figured out the anchor parameter to the Pushpin constructor. With that parameter, you can adjust where the pin added, like so:

var pin = new Microsoft.Maps.Pushpin(loc, { icon: ‘/Images/MyIcon.png’, height: 15, width: 15, anchor: new Microsoft.Maps.Point(8, 8) }); 

That worked for my test pages, but when I moved it into my “production” site, it didn’t. It was better, but still not what I needed. Since I know the suspense is killing you, the problem was actually my style sheet. I had a <div> tag surrounding all my elements, and this element used the “page” class in my style sheet:

.page
{
    background-color: #fff;
    margin: 10px 10px 0px 10px;
    border: 1px solid #496077;
}

After I removed the style, the Pushpins appeared correctly. My theory is that the margin was pushing the pin from the position it should have been, but I’ll have to do some experimenting to be sure.

Aligning text on a Bing Maps Pushpin

I was messing with Bing Maps, trying to add text to Pushpins. It was fairly simple to do, just add the “text” property to the Pushpin constructor:

var pin = new Microsoft.Maps.Pushpin(loc, { icon: ‘/Images/Pushpin.png’, height: 40, width: 40, text: ’99’ });

But the text, 99, was aligning high on the Pushpin, so the top part of my text was being cut off. And it looked ugly. So after a little research, I found the textOffset property. Adding this property to the constructor allowed me to align the text just like I wanted:

var pin = new Microsoft.Maps.Pushpin(loc, { icon: ‘/Images/Pushpin.png’, height: 40, width: 40, text: ’99’, textOffset: new Microsoft.Maps.Point(0,10) });

Notice that the textOffset property takes a Point. You can’t just go plugging values willy nilly, or chilly willy, or milly vanilly in there – you have to use a Point.

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.