I know there are a million questions about "parsererror", but can't seem to find an answer that makes sense for my situation. Here is my sickly code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$.ajax({
url: 'http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0',
dataType: 'jsonp',
contentType: 'application/jsonp; charset=utf-8',
jsonp: 'onscriptload',
success: function(data, textStatus)
{
console.log("Success.");
var MM = Microsoft.Maps;
var map = new MM.Map($('#mapDiv')[0],
{
credentials: 'a valid bing maps key'
});
},
error: function(xOptions, textStatus)
{
console.log(JSON.stringify(xOptions) + ' ' + textStatus);
}
});
</script>
</head>
<body>
<div id="mapDiv" class="map"></div>
</body>
</html>
The "error" part is triggered, and returns {"readyState":4,"status":200,"statusText":"load"} parsererror, and I'm stumped trying to get this to work. Exact same error/behavior in IE11 as well as Chrome. This was the most helpful article (Callback function for JSONP with JQuery ajax), but "onscriptload" should already be a built-in function that I shouldn't have to (re)define/overload, no? Any help appreciated...
That ajax request was an "hack" in order to just load the bing maps lib on-demand and not on page load. I would recommend a typical approach like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></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">
function loadMap() {
// Initialize the map
var map = new Microsoft.Maps.Map(document.getElementById("map"),
{
credentials: "BING MAPS KEY HERE"
});
//load the pushpins here
}
</script>
</head>
<body onload="loadMap();">
<div id="map"></div>
</body>
</html>