I'm trying to use an infobox as a tooltip. I want the infobox to appear at the pushpin the mouse hovers above.
This functionality seems to work fine when the map is sufficiently zoomed in. However when the map is zoomed out - the infobox sometimes appears off the view-port (the infobox behaves as if the map has been translated horizontally).
see here
It's my suspicion that the map is simply wrapping on itself, because it's zoomed out almost all the way. Perhaps this means there are duplicate coordinates on the map canvas, though they're not shown in the view-port.
Pushpins with coordinates that appear only once on the map canvas show the infobox in the correct location.
Can anybody shed some light on this? Any help is appreciated.
I've included a basic version of my code below.
var map;function loadMapScenario() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'api key',
maxZoom: 2,
enableSearchLogo: false,
disableBirdseye: true,
showDashboard: false,
showMapLabel: true,
showScalebar: false,
disablePanning: true,
disableZooming: true,
disableKeyboardInput: true,
disableMouseInput: false,
disableTouchInput: true,
disableUserInput: false
});
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds());
var infoBox = new Microsoft.Maps.Infobox(pushpins[0].getLocation(), { title: 'title',
description: 'description', showCloseButton: false });
infoBox.setMap(map);
for (var i = 0; i < pushpins.length; i++) {
var pushpin = pushpins[i];
Microsoft.Maps.Events.addHandler(pushpin, "mouseover", function (e) {
infoBox.setLocation(e.target.getLocation());
});
}
map.entities.push(pushpins);
}
<!DOCTYPE html><html>
<head>
<title>Bing Maps Full Width</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
<div id='myMap' style='width: 100%; height: 500px;'></div>
<script type='text/javascript' src='js/maps.js'></script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
</body>
</html>
There is a known issue with the TestDataGenerator and "world-wrap" when zoomed out all the way. Notice that not all 10 pushpins are displayed on the map. The infobox is being displayed in the correct position, but the pushpin isn't being rendered.
Also, looking through your map options there are a few that aren't needed: