I've created pushpin using the follwing code
var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
icon: 'images/pushpin.png',
text: '1',
typeName: 'pushpinStyle'
});
Text displayed in the pushpin icon is 5px below from top of the icon by default. I've changed the height and width of the pushpin icon, but no improvement in text format inside the pushpin. How to format the text inside the pushpin.
I've googled a lot but i didn't get the correct response. Thanks in advance
I'm actually using the
htmlContent
option on the pushpin:This way you don't have the nastiness of using !important styles like in @Bojin Li's solution... which I noticed were causing a problem on mobile anyway. Everytime I'd scroll the map my custom styles would be removed until the map stopped moving again. This is also just an incredibly flexible configuration option. You can put any html you want in there.
API reference: http://msdn.microsoft.com/en-us/library/gg427629.aspx
You are on the right track to specify the typeName property for your Pushpin. As you probably already know, specifying a typeName of
pushpinStyle
will cause the created Pushpin to have a class ofpushpinStyle
. If you inspect the generated html of your Pushpin on the map, you will see that the Pushpin text is reaized by an absolutely positioned child<div>
inside the Pushpin<div>
. So the logical thing to do would be to use css to further style the Pushpin text<div>
. For example, you can do the following:This will cause the Pushpin text
<div>
to have the above styles. Of course you can add your own styles to suit your application.