Search code examples
javascriptjquerybing-mapsvirtual-earth

Virtual Earth Uncaught TypeError: undefined is not a function


I am trying to lazy load a Virtual Earth map in a JQuery UI tab. I also have a Google map in another tab. What I am trying to do is have both maps match the center location when a user moves either map. Here is how I am trying to do the Virtual Earth side

var vemap;

//Lazy Load the Virtual Earth API
function loadMapControl() {
   var script = document.createElement("script");
   script.setAttribute("src", "http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onScriptLoad=initMap");
   script.setAttribute("type", "text/javascript");
   document.getElementsByTagName("head")[0].appendChild(script);
};

//Now load the Map 
function initMap() {
   var StartPoint = new  Microsoft.Maps.Location(currentLat, currentLng);
   vemap = new Microsoft.Maps.Map(document.getElementById("ve-map-canvas"), 
        {credentials:"<creds>", 
        center: StartPoint,
        zoom: gemap.getZoom(),
        mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
        disableBirdseye:true,
        showMapTypeSelector:false});

    Microsoft.Maps.Events.addHandler(vemap, 'viewchangeend', veChanged);
};

function veChanged() {
    var localMap = this.target;
    var point = new GeoPoint(localMap.GetCenter().Longitude,    localMap.GetCenter().Latitude);
    $("#lat").val(point.getLatDeg());
    $("#lng").val(point.getLonDeg());
    $("#currentZoom").val(localMap.GetZoomLevel());
    currentLat = localMap.GetCenter().Latitude;
    currentLng = localMap.GetCenter().Longitude;
    currentZoom = localMap.GetZoomLevel();
};

Now when I recenter the Virtual Earth map the veChanged event is triggered but the localMap.GetCenter() fails with "Uncaught TypeError: undefined is not a function". I have also tried vemap.GetCenter() but I get the same result. Any thoughts on how I can get access to the vemap?


Solution

  • I think your problem is that you use wrong function name try getCenter() instead of GetCenter(). Notice that the first letter is in lower case:

    var point = new GeoPoint(localMap.getCenter().logitude, localMap.getCenter().latitude);
    

    Notice that other idetifiers I used also have the first letter in lower case.