How to format text or change font size inside pushpin in bingmaps ajax

I created a pushpin using the following code

var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
        icon: 'images/pushpin.png',        
        text: '1',
        typeName: 'pushpinStyle'


The text displayed in the button icon defaults to 5 pixels below. I changed the height and width of the thumbnail, but did not improve the formatting of the text inside the button. How to format text inside a button.

I googled a lot, but I didn't get the right answer. thanks in advance


source to share

2 answers

You are on the right track to specify the typeName property for your Pushpin. As you probably already know, specifying the typeName pushpinStyle

will result in the generated Pushpin class pushpinStyle

. If you inspect the generated html of your Pushpin on the map, you can see that the Pushpin text is being reanimated by an absolutely positioned child <div>

inside the Pushpin <div>

. Therefore, it would be logical to use css to further style the Pushpin text <div>

. For example, you can do the following:

.pushpinStyle div{
    color: black !important; /*Make Pushpin text black*/
    left: 5px !important;  /*Since Pushpin text is absolutely positioned, this will cause the text to be 5 pixels from the left instead of 0 pixels */
    text-shadow: 1px 0px white, -1px 0px white, 0px -1px white, 0px 1px white;  /*Give the text all around white text shadow so it looks nice on browsers that support it*/
    font: 12px arial,sans-serif; !important // override default fonts 


This will cause the Pushpin text <div>

to have the above styles. Of course, you can add your own styles to suit your application.



I actually use the option htmlContent

on the button:

var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
    typeName: 'pushpinStyle',
    htmlContent: '<img src="images/pushpin.png" alt=""/>' +


This way you have no nasty things to use! important styles like in @ Bojin Li's solution ... which I noticed was still causing the issue on mobile devices. Every time I scrolled the map, my custom styles were removed until the map stopped moving again. It's also an incredibly flexible configuration option. You can put any html you want there.

API Link:



All Articles