I've set up an interactive Here Maps map in Legacy mode, complete with a tap
event listener added in the following manner:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-data.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
</div>
<script type="text/javascript">
// Initialize the platform object
var platform = new H.service.Platform({
// Real API key omitted for security reasons
'apikey': 'notARealAPIKeyPleaseSubstituteForARealOne'
});
// Get default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and show) a map object
// Using raster maptype and P2D for compatibility with IE11
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.raster.normal.map,
{
zoom: 12,
center: { lat: -33.81, lng: 150.78 },
pixelRatio: window.devicePixelRatio || 1,
engineType: H.map.render.RenderEngine.EngineType.P2D
});
// Add a default UI to the map
var ui = H.ui.UI.createDefault(map, maptypes);
// Make the map draggable
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Add a listener for the 'tap' event on the map
map.addEventListener("tap",
function (evt) {
console.log("Map tapped!", evt)
});
</script>
</body>
</html>
While everything functions smoothly in browsers like Chrome and IE11, with the ability to drag the map and see tap event details logged in the console, issues arise when this page is introduced as the URL for a .NET WebBrowser control within a WinForms project. Suddenly, both the map dragging and tap events cease to work without any error messages appearing in the console. It's almost as if there's something preventing the firing of map events within that environment.
I've attempted the registry adjustment mentioned in this post to direct the WebBrowser in the WinForms app to utilize IE11 exclusive of IE7 Compatibility Mode (and confirmed proper application through a user agent checker), yet to no avail. Running the page within the Visual Studio debugger while loaded into the WinForms app confirms it reaches the addEventListener
line flawlessly. To further troubleshoot, I included a button on the page with a click
event, which executed perfectly.
I'm beginning to feel stumped by the situation. Could there be an overlooked detail, or does the WebBrowser control exhibit peculiar behavior causing these events not to trigger? If so, is there a workaround available?