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.

Advertisements
  1. Leave a comment

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: