none
Jumping Infoboxes with custom HTML RRS feed

  • Question

  • Hi,

    it looks like the y-offset of infoboxes with custom html is reset to zero on mapchange/mapchchangeend events. Different browsers behave a little different, but IE and Firefox show the same... To reproduce: Load the HTML, click the pin, and zoom in. The infobox will jump over the pin.

    On Firefox the infobox will jump on every viewchangeend. So just drag the map a bit and see.

    A small workaround is to register handlers for viewchange and viewchangeend and set the offset of the infobox again, also hide the infobox on zoom, but this only handles 90%.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title>Jumping Infobox</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>
    		<style type="text/css">
    			.ib{
    				;
    				width:300px;
    				height: 238px;
    				background-color: #FFFFFF;
    				opacity: 0.7;
    				border-radius: 25px;
    				border: 1px solid #968e7a;
    			}
    			div.ibtop{
    				height: 49px;
    				border-bottom: 1px solid #968e7a;
    				margin: 0px 2px 0px 2px;
    			}
    			.ibtop span{
    				;
    				margin: 22px 6px 0px 6px;
    				
    			}
    		</style>
    		<script type="text/javascript">
    		var map = null, pinInfobox;      
    		function getMap(){
    			map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'XYZ'});
    			var pin = new Microsoft.Maps.Pushpin(map.getCenter(),{draggable: false});
    			pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), {visible: false, 
    				offset: new Microsoft.Maps.Point(-150,12),
    				width: 300,
    				height: 238,
    				htmlContent: '<div class="ib"><div class="ibtop"><span><b>Headline</b></span></div><div class="ibbody"><span class="ibheadline">Something Else</span></div></div>'
    			});
    			
    			Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
    
    			
    			map.entities.push(pin);
    			map.entities.push(pinInfobox);
    		}   
    		function displayInfobox(e)
            {
                pinInfobox.setOptions({ visible:true });
            }
    
    		</script>
    	</head>
    	<body onload="getMap();">
    		<div id='myMap' style="; width:800px; height:800px;"></div>
    	</body>
    </html>

    Thanks and Greets!

    edit: This forum removes position | absolute from my html code... insert it on the first css line of .ib


    • Edited by Cpt_Hero Wednesday, June 18, 2014 1:07 PM
    Wednesday, June 18, 2014 12:59 PM

Answers

  • Your code works fine for me. The infobox stays linked to the pushpin in the same position as I pan and zoom the map. I've tried this on IE 8-11, and Chrome.

    http://rbrundritt.wordpress.com

    Wednesday, June 18, 2014 7:09 PM