none
Bing Maps v7: Custom HTML/CSS Pushpin RRS feed

  • Question

  • Hi,

    We are trying to migrate from Bing Maps v6.3 to v7.0. In v6.3 we could customize the pushpin using the CustomHTML property of the VECustomIconSpecification class. However, in v7.0 there is no such property and it does not seem to be supported. I am aware of the PushpinOptions.typeName property, but it just allows to customize the div style, not putting some HTML or CSS in it. Is there any workaround? We will not be able to migrate to v7 until this functionnality is added. You can see what we are trying to do in the attached image (currently working in v6):

    You can see that the icons are highly customized, with some CSS rotation effects, a title label with a border and an icon in it. We need to be able to do that in v7.

    Thank you!


    • Edited by sixstorm1 Friday, June 22, 2012 2:45 PM
    Friday, June 22, 2012 2:43 PM

Answers

  • As I'm sure you found there is no support for customer HTML pushpins in Bing Maps V7. However, you can use the Infobox class and pass in your custom HTML pushpin information into the htmlContent property. Here is a code sample:

    <!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">
             var map = null; 
    
    
             function GetMap()
             {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("myMap"), {credentials:"Bing Maps Key"}); 
    
                // Retrieve the location of the map center 
                var center = map.getCenter();
    
                // Create an info box 
                var infoboxOptions = {
    				width: 40, 
    				height: 10, 
    				htmlContent : "<div><b>MyPin</b></div>",
    				offset: new Microsoft.Maps.Point(-20,-5)
    			};
    								  
                var myCustomPushpin = new Microsoft.Maps.Infobox(center, infoboxOptions);
    
    
                // Add the info box to the map
                map.entities.push(myCustomPushpin);
             }
    
             function InfoboxHandler()
             {
                alert("Infobox title was clicked!");
             }
          </script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="position:relative; width:500px; height:500px;"></div>       
    </html>


    http://rbrundritt.wordpress.com

    • Marked as answer by sixstorm1 Saturday, June 23, 2012 2:12 AM
    • Unmarked as answer by sixstorm1 Saturday, June 23, 2012 3:56 AM
    • Marked as answer by sixstorm1 Saturday, June 23, 2012 6:11 AM
    Friday, June 22, 2012 2:56 PM

All replies

  • As I'm sure you found there is no support for customer HTML pushpins in Bing Maps V7. However, you can use the Infobox class and pass in your custom HTML pushpin information into the htmlContent property. Here is a code sample:

    <!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">
             var map = null; 
    
    
             function GetMap()
             {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("myMap"), {credentials:"Bing Maps Key"}); 
    
                // Retrieve the location of the map center 
                var center = map.getCenter();
    
                // Create an info box 
                var infoboxOptions = {
    				width: 40, 
    				height: 10, 
    				htmlContent : "<div><b>MyPin</b></div>",
    				offset: new Microsoft.Maps.Point(-20,-5)
    			};
    								  
                var myCustomPushpin = new Microsoft.Maps.Infobox(center, infoboxOptions);
    
    
                // Add the info box to the map
                map.entities.push(myCustomPushpin);
             }
    
             function InfoboxHandler()
             {
                alert("Infobox title was clicked!");
             }
          </script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="position:relative; width:500px; height:500px;"></div>       
    </html>


    http://rbrundritt.wordpress.com

    • Marked as answer by sixstorm1 Saturday, June 23, 2012 2:12 AM
    • Unmarked as answer by sixstorm1 Saturday, June 23, 2012 3:56 AM
    • Marked as answer by sixstorm1 Saturday, June 23, 2012 6:11 AM
    Friday, June 22, 2012 2:56 PM
  • Thank you for your reply, I didn't think of that. But it doesn't seem to be a clean way to do it, and the Infobox Class reference page says that "For the best performance, it is recommended that you have only one info box on the map at a time", which is not ideal because we may have to put a lot of pushpins on the map. Also, we are losing some key pushpin events, like dragging.

    I hope you consider supporting that function again in a future release. It is very hard to upgrade when some useful functionalities like this are removed, because it breaks everything that we have been worked on.

    Thank you

    Saturday, June 23, 2012 2:12 AM
  • At first I tought your solution was working, but when using the Microsoft.Maps.Themes.BingTheme(), infobox events are not fired. How do I fix this? Thank you!
    Saturday, June 23, 2012 3:57 AM
  • Never mind, using "customizeOverlays: true" and it works perfectly. Thanks!
    Saturday, June 23, 2012 6:11 AM
  • I had fixed this issue.

    you can set typename(css) to pushpin, then you can find the div through typename, modify the div with your html.

    you can operate this div when you need to changed pushpin. 

    Monday, June 25, 2012 8:28 AM
  • 具体的解决办法可以参考我的博客:http://blog.csdn.net/jcx5083761/article/details/7690343

    Monday, June 25, 2012 9:04 AM
  • In regards to the performance comment. In general it is better to have one infobox and update it's content than to have a bunch of pushpins, each with their own infobox. That is what that comment was in regards to. However, since their is no pushpins, and we are using the infobox as a pushpin there is no performance issue. In fact the only unclean part of this method is the name of class we are using "Infobox" rather than "Pushpin" or "CustomPushpin". Overall this is a very valid way to create custom pushpins.

    http://rbrundritt.wordpress.com

    Monday, June 25, 2012 9:29 AM