none
How to change the font size of the text in the pushpins (V7) RRS feed

  • Question

  • Hello,

    I have a map with custom pushpins. The look like the default pushpins but they are smaller (26 x 17). Now the default font is to large. How can I get it smaller. One further question: How can I center the text in the middle of the icon?

    My actual code is the following:

    var pin = map.AddPushpin(new Microsoft.Maps.Location(" . $v->lat . "," . $v->lon  . "),

    { text: '1', height: '26px', width: '17px' , sticky: true, icon: '/images/icon_green.png' });

    Thank you very much in advance.

    I searched for several hours to solve the problem by myself, but I didn't find anything. :-(

    Regards. Frederik

    • Moved by Ricky_Brundritt Friday, March 9, 2012 6:22 PM (From:Bing Maps: Map Control and Web services Development)
    Wednesday, January 26, 2011 2:18 PM

Answers

  • Hi

     

    Your sample code seems a little confused, its using map.AddPushPin which is from 6.3 but the rest of the syntax is from v7? Anyway your problem is width and height of icon are specified as ints (without the px) then the text is nicely centered:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
       <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
       <script type="text/javascript">
       function GetMap()
       {  
    
         var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
                  {credentials: "Your Bing Maps Key",
                  center: new Microsoft.Maps.Location(52,0.2),
                  mapTypeId: Microsoft.Maps.MapTypeId.road,
                  zoom: 7});
         var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(52,0.2),{ text: '1', height: 34, width: 20 , icon: 'http://www.westdevon.gov.uk/subfiles/graphics/mapIconDarkGreenBlank.png' });
    	 map.entities.push(pin);
       }
       </script>
      </head>
      <body onload="GetMap();">
       <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>    
      </body>
    </html>
    
    
    


    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware | Windows Live Developer MVP
    Thursday, January 27, 2011 8:13 AM
    Moderator

All replies

  • Which version of Bing are you using ?
    Aditya Tadakaluru MCPD, MCITP, MCTS(Bing Maps)
    Wednesday, January 26, 2011 8:36 PM
  • Hi

     

    Your sample code seems a little confused, its using map.AddPushPin which is from 6.3 but the rest of the syntax is from v7? Anyway your problem is width and height of icon are specified as ints (without the px) then the text is nicely centered:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
       <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
       <script type="text/javascript">
       function GetMap()
       {  
    
         var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
                  {credentials: "Your Bing Maps Key",
                  center: new Microsoft.Maps.Location(52,0.2),
                  mapTypeId: Microsoft.Maps.MapTypeId.road,
                  zoom: 7});
         var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(52,0.2),{ text: '1', height: 34, width: 20 , icon: 'http://www.westdevon.gov.uk/subfiles/graphics/mapIconDarkGreenBlank.png' });
    	 map.entities.push(pin);
       }
       </script>
      </head>
      <body onload="GetMap();">
       <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>    
      </body>
    </html>
    
    
    


    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware | Windows Live Developer MVP
    Thursday, January 27, 2011 8:13 AM
    Moderator
  • Hi,

    thank you for your answers. I'm using V7. The "map.AddPushPin" comes from a code I found in the web to create sticky textboxes (with html contents) in V7. I just didn't see any advantage to change it to the V7 method.

    Indeed, without the "px" the text is in the center of the icon.

     

    However the font is till to large. Is their any possibility to change the size of the font?

     

    Thanks in advance.

    Fred

    Saturday, January 29, 2011 12:09 PM
  • Did anyone figure this out? I have the same requirement. It would be helpful if there was a class on each type of object the map renders that we can hook into.
    Jonathon
    Monday, February 14, 2011 12:40 AM
  • Hi,

    Did anybody found the solution to this, will be of great help... Thanks

    Tuesday, July 12, 2011 4:08 AM
  • Try below workaround to change font style of pushpin text.

    <script type="text/javascript">
        var map = null;
        function GetMap() {
     
           map = new Microsoft.Maps.Map(document.getElementById('myMap'), {showBreadcrumb: true});     
           var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.5, 2.75), { text: '1', typeName: 'customStyle' });
           map.entities.push(pin);
        }
    </script>
    <style type="text/css">
      .customStyle div { font-size: 8px !important; };
    </style>


    MSFT
    Hemant Goyal
    Tuesday, July 12, 2011 4:55 AM