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:

    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.

  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: