none
Load infobox with html content RRS feed

  • Question

  • Hello.

    Im trying to use infobox with html content in it. The code im using right now is below. The problem is that i cant see any examples doing it

    function showPosition(position) {
                //display position
    
                pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
                infoboxLayer.push(pinInfobox);
                var location = position.coords;
                var i = 0;
                map.setView({
                    zoom: 10,
                    center: new Microsoft.Maps.Location(location.latitude,
                                                        location.longitude)
                });
    
                $.getJSON("Home/GetLocations", function (locationsArray) {
                    $.each(locationsArray, function (index, location) {
    
                        var pushpinOptions = { icon: '../images/BingMap/discussion-icon-ny.png', width: 30, height: 40 };
                        var latLon = new Microsoft.Maps.Location(location.latitude, location.longitude);
                        var pin = new Microsoft.Maps.Pushpin(latLon, pushpinOptions);
                        pin.Title = name;//usually title of the infobox
                        pin.Description = set; //information you want to display in the infobox
                        pinLayer.push(pin);//add pushpin to pinLayer
                        Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
                        i++;
                        
                        //var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(location.latitude, location.longitude), pushpinOptions);
                        //map.entities.push(pushpin);
    
                        //var infoboxOptions = { width: 200, height: 100, showCloseButton: true, zIndex: 0, offset: new Microsoft.Maps.Point(10, 0), showPointer: false, title: 'Infobox Title', description: 'Infobox description' };
                        //var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), null);
                        //displayAlert('Now Setting Options');
                        //defaultInfobox.setOptions(infoboxOptions);
    
                    });
                    map.entities.push(pinLayer);
                    map.entities.push(infoboxLayer);
                });
            }


    Best Regard Morten Starck


    • Edited by MStarck Thursday, January 10, 2013 6:09 PM
    Thursday, January 10, 2013 5:32 PM

Answers

  • This is the example from the SDK

    http://www.bingmapsportal.com/isdk/ajaxv7#Infobox20

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>Infobox set html content</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()
          {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
          }
          
          function setInfoBoxHTMLContent()
          {
            map.entities.clear();         
            var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true}; 
            var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );    
            map.entities.push(defaultInfobox);
            defaultInfobox.setHtmlContent('<div id="infoboxText" style="background-color:White; border-style:solid;border-width:medium; border-color:DarkOrange; min-height:100px; width:240px;"><b id="infoboxTitle" style="; top:10px; left:10px; width:220px;">myTitle</b><a id="infoboxDescription" style="; top:30px; left:10px; width:220px;">Description</a></div>'); 
          }
          </script>
       </head>
       <body onload="getMap();">
          <div id='myMap' style="; width:400px; height:400px;"></div>
          <div>
             <input type="button" value="SetInfoBoxHTMLContent" onclick="setInfoBoxHTMLContent();" />
          </div>
       </body>
    </html>

    Thursday, January 10, 2013 11:00 PM
  • I also have a blog post on this here: http://rbrundritt.wordpress.com/2011/11/08/simple-custom-infoboxes-in-bing-maps-v7/

    http://rbrundritt.wordpress.com

    Monday, January 14, 2013 5:15 PM

All replies

  • This is the example from the SDK

    http://www.bingmapsportal.com/isdk/ajaxv7#Infobox20

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>Infobox set html content</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()
          {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
          }
          
          function setInfoBoxHTMLContent()
          {
            map.entities.clear();         
            var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true}; 
            var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );    
            map.entities.push(defaultInfobox);
            defaultInfobox.setHtmlContent('<div id="infoboxText" style="background-color:White; border-style:solid;border-width:medium; border-color:DarkOrange; min-height:100px; width:240px;"><b id="infoboxTitle" style="; top:10px; left:10px; width:220px;">myTitle</b><a id="infoboxDescription" style="; top:30px; left:10px; width:220px;">Description</a></div>'); 
          }
          </script>
       </head>
       <body onload="getMap();">
          <div id='myMap' style="; width:400px; height:400px;"></div>
          <div>
             <input type="button" value="SetInfoBoxHTMLContent" onclick="setInfoBoxHTMLContent();" />
          </div>
       </body>
    </html>

    Thursday, January 10, 2013 11:00 PM
  • I also have a blog post on this here: http://rbrundritt.wordpress.com/2011/11/08/simple-custom-infoboxes-in-bing-maps-v7/

    http://rbrundritt.wordpress.com

    Monday, January 14, 2013 5:15 PM