Bing Maps on IE 11 browser, The mouse click event is only working when we have compatibility mode on.

Question

I have tried out the code in this article in ASP.Net web forms with c#  and javascript.
I am using Ajax to call the C# from Javascript and load the data from database.
I have used following article to show the pushpins and there infoboxes.
http://blogs.msdn.com/b/rbrundritt/archive/2013/11/08/multiple-pushpins-and-infoboxes-in-bing-maps-v7.aspx?CommentPosted=true#commentmessage
My code works great on IE 11 , when I have compatibility mode on,
but when compatibility mode is off, the mouse click event is not being received by the Javascript function.
Is this expected behavior of bing maps, Are there any workarounds for this problem?
Thanks
Nate

Answer 1

Hi Ricky, I have tried using Chrome and I see the same issue. The mouse events are not being captured. 
Here is my code
<%@ Page Title="" Language="C#" MasterPageFile="~/Maps.Master" AutoEventWireup="true" CodeBehind="BingMaps.aspx.cs" Inherits="MyMaps.secure.BingMaps" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderBody" runat="server" >
<asp:ScriptManager ID="ScriptManager" runat="server"
EnablePageMethods="true" />
<div id="MapHolder" style="; width:1000px; height:800px; " />
<asp:Literal ID="Literal1" runat="server">
</asp:Literal>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptSection" runat="server">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>
<script type="text/javascript" >
var map = null, infobox, dataLayer;
$(document).ready(function () {
GetMap();
function GetMap() {
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("MapHolder"),
{ credentials: "lincensekey", zoom: 2 });
dataLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(dataLayer);
var infoboxLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(infoboxLayer);
infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0, 20) });
infoboxLayer.push(infobox);
PageMethods.GetLocations(RequestCompletedCallback, RequestFailedCallback);
function AddData(MapPoints) {
for (var i = 0, len = MapPoints.length; i < len; ++i)
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(parseFloat(MapPoints[i].lat),parseFloat(MapPoints[i].lon))
icon: MapPoints[i].group,
height: 50, width: 60, text: MapPoints[i].city
pushpin.Title = MapPoints[i].name;
pushpin.description = MapPoints[i].desc;
Microsoft.Maps.Events.addHandler(pushpin, 'click', displayInfobox);
dataLayer.push(pushpin);
function displayInfobox(e) {
if (e.targetType == 'pushpin') {
infobox.setLocation(e.target.getLocation());
infobox.setOptions({ visible: true, title: e.target.Title, description: e.target.description });
function RequestCompletedCallback(result) {
result = eval(result);
AddData(result);
function RequestFailedCallback(error) {
var stackTrace = error.get_stackTrace();
var message = error.get_message();
var statusCode = error.get_statusCode();
var exceptionType = error.get_exceptionType();
var timedout = error.get_timedOut();
alert("Stack Trace: " + stackTrace + "<br/>" +
"Service Error: " + message + "<br/>" +
"Status Code: " + statusCode + "<br/>" +
"Exception Type: " + exceptionType + "<br/>" +
"Timedout: " + timedout);