none
Can't get the offset for infoboxes to work. RRS feed

  • Question

  • I can't seem to get the offset to work when I assign a pushpin to an infobox while using the new Theme.

    If I don't assign a pin it shows in the right spot. Otherwise, it points to the location.

    I even tried it in this example from one of the samples:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
            <head>
            <title>Load map with navigation bar module</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()       
        {
            Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', { callback: function()
            {
                map = new Microsoft.Maps.Map(document.getElementById('myMap'),
                {
                      credentials: " BING_MAPS_KEY",
                      theme: new Microsoft.Maps.Themes.BingTheme()
                });
                var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(34.05, -118.24), null);
                map.entities.push(pin1);
                map.entities.push(new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(34.05, -118.24), {title: 'Los Angeles', description: 'description here', pushpin: pin1, offset: new Microsoft.Maps.Point(-100, 100)}));
                var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.50, -0.127), null);
                map.entities.push(pin2);
                map.entities.push(new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(51.50, -0.127), {title: 'London', description: 'description here', pushpin: pin2}));
     
            }});
        }
            </script>
            </head>
            <body onload="getMap();">
            <div id='myMap' style="; width:600px; height:400px;"></div>
            </body>
    </html>


    • Edited by Ricky_Brundritt Thursday, April 11, 2013 5:09 PM removing Bing Maps key
    Wednesday, April 10, 2013 8:40 PM

Answers

  • When using the Bing Theme you have limited customization options as this module is meant to use a specific custom style. Modify this custom style will likely cause it to break, as such customizations to it are often blocked. Also, just as a tip, add a style to the style of your map div. This will help reduce rendering issues in the future.

    http://rbrundritt.wordpress.com

    Thursday, April 11, 2013 5:12 PM