none
Problem with latest version of Bing Maps v7 Ajax and MS CRM 2011? RRS feed

  • Question

  • We have an html page that loads a Bing map with a single pushpin within an iFrame on a CRM 2011 page. This was working fine until recently (not sure when exactly things started breaking but definitely within the past two weeks).

    Here's the problem: the map loads fine, properly centered, and so does the pushpin. But when the user tries to drag the pushpin, the drag stops after a few milliseconds, so the pushpin can only be moved a tiny bit per drag. Some map tiles (those nearest the pushpin) become blue, as if they were selected. Again, this had been working perfectly for a while until recently.

    Here's the code of the page within the iFrame. I've commented out the code within the drag event thinking it might be the problem, but it didn't change a thing.

    This being hosted on an on-premises CRM 2011 server, clients use IE 9 exclusively.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <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&mkt=fr-FR"></script>
    
          <script type="text/javascript">
             
             var map = null;
    		 var city = window.parent.Xrm.Page.getAttribute('eh_city').getValue();
    		 var latitudeElmt = window.parent.Xrm.Page.getAttribute('eh_latitude');
    		 var longitudeElmt = window.parent.Xrm.Page.getAttribute('eh_longitude');
     
             function GetMap()
             {
    			// If it's a new operation, don't do anything with the map
    			if(city == null || city == 'undefined' || city.length == 0)
    				return;
    			// If latitude and longitude info is present, create the map
    			
    			else if(latitudeElmt.getValue() != null && latitudeElmt.getValue() != 0 && longitudeElmt.getValue() != null && longitudeElmt.getValue() != 0) {
    				map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
    				{credentials:"CREDENTIALS_REMOVED",
    				center: new Microsoft.Maps.Location(latitudeElmt.getValue(), longitudeElmt.getValue()),
    				mapTypeId: Microsoft.Maps.MapTypeId.aerial,
    				zoom: 16,
    				showScalebar: false,
    				showCopyright: false,
    				showDashboard: false,
    				showMapTypeSelector: false,
    				enableClickableLogo: false,
    				enableSearchLogo: false });
    				
    				AddPushpin(map.getCenter());
    			}
    			else {
    				// Initialize the map and try to get geocode info using the name of the city
    				map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
    				{credentials:"CREDENTIALS_REMOVED", 
    				mapTypeId: Microsoft.Maps.MapTypeId.aerial,
    				zoom: 8,
    				showScalebar: false,
    				showCopyright: false,
    				showDashboard: false,
    				showMapTypeSelector: false,
    				enableClickableLogo: false,
    				enableSearchLogo: false,
                    disableKeyboardInput: true });
    
    				ClickGeocode();
    			}
             }
    		 
             function ClickGeocode(credentials)
             {
                map.getCredentials(MakeGeocodeRequest);
             }
    
             function MakeGeocodeRequest(credentials)
             {
                var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations/" + city + "?output=json&jsonp=GeocodeCallback&key=" + credentials;
                CallRestService(geocodeRequest);
             }
    
             function GeocodeCallback(result) 
             {
    
                if (result &&
                       result.resourceSets &&
                       result.resourceSets.length > 0 &&
                       result.resourceSets[0].resources &&
                       result.resourceSets[0].resources.length > 0) 
                {
                   // Set the map view using the returned bounding box
                   var bbox = result.resourceSets[0].resources[0].bbox;
                   var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
                   map.setView({ bounds: viewBoundaries, zoom: 8 });
    				
    
    			// Add a pushpin at the found location
                   var location = new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]);
    				AddPushpin(location);
    				document.getElementById("result").style.display = "none";
                }
    			//if attempt to get geocode info fails, hide the map
    			else
    			{
    				document.getElementById("result").innerText = "Aucun résultat pour " + city + ". Veuillez rentrer les géocoordonnées du site.";
    				document.getElementById("mapDiv").style.display = "none";
    			}
    		 }
    		 
    		 function AddPushpin(location) {
    			// Add a pushpin at the found location
                   var pushpin = new Microsoft.Maps.Pushpin(location, { text: city, draggable:true });
                   map.entities.push(pushpin);
    
    				//Wire events for dragging
    				Microsoft.Maps.Events.addHandler(pushpin, 'drag', DragHandler);
    				Microsoft.Maps.Events.addHandler(pushpin, 'dragend', EndDragHandler);
    				document.getElementById("result").style.display = "none";
    		 }
    		 
    		function DragHandler(e) {
    			//var loc = e.entity.getLocation();
    			//window.parent.Xrm.Page.getAttribute("eh_latitude").setValue(parseFloat(eval(loc.latitude.toFixed(4))));
    			//window.parent.Xrm.Page.getAttribute("eh_longitude").setValue(parseFloat(eval(loc.longitude.toFixed(4))));
    		}
    		
    		function EndDragHandler(e) {
    			
    			}
    		 
    
             function CallRestService(request) 
             {
                var script = document.createElement("script");
                script.setAttribute("type", "text/javascript");
                script.setAttribute("src", request);
                document.body.appendChild(script);
             }
    
          </script>
       </head>
       <body onload="GetMap();">
          <div id='mapDiv' style="position:relative; width:720px; height:400px;"></div>
    	  <table style="width: 720px; height: 200px;">
    	  <tr>
    <td class="ms-crm-List-MessageText" id="result" style="font-family:Segoe UI, Tahoma, Arial;font-size:11px;text-align:center;color:#999999;width:100%;"></td>
      </tr>
      </table>
       </body>
    </html>



    • Edited by hfroissart Friday, April 6, 2012 12:26 PM
    Tuesday, April 3, 2012 3:09 PM

Answers

  • Found the fix for my problem. Perhaps it affects you as well.

    Try this solution.

    Basically in my case my company disabled the "drag and drop files" feature for intranet sites with group policy, and it inadvertently blocked dragging page elements too.

    So now I have to go fight a battle with my group policy managers.

    Wednesday, April 18, 2012 6:04 AM

All replies

  • Well, it's definitely some interaction between the MS CRM Javascript and the veapicore.js code -- I took that page, hard-coded lat/long values and loaded it on its own (not within a CRM page iFrame) -- works like a charm, no problem whatsoever dragging the pushpin all over the map.

    FWIW, we're on update rollup 6 of CRM 2011. veapicore.js is version 7.0.20120309154116.34/fr-FR

    Friday, April 6, 2012 12:33 PM
  • Have you noticed any oddities with resizing columns or dragging elements when customizing forms? Because I get similar behavior to your push-pin issue, but with this CRM standard functionality.
    Tuesday, April 17, 2012 11:39 AM
  • Found the fix for my problem. Perhaps it affects you as well.

    Try this solution.

    Basically in my case my company disabled the "drag and drop files" feature for intranet sites with group policy, and it inadvertently blocked dragging page elements too.

    So now I have to go fight a battle with my group policy managers.

    Wednesday, April 18, 2012 6:04 AM
  • Well, we do have drag and drop enabled, so that's not the problem. Good catch though, and thanks for passing on the information.

    I think for now, I'll just add a link element which will open a new page with the map, and will pass lat/long information to the parent page via the dragend event. It's a kludge, but I can't think of another way.

    Thursday, April 19, 2012 7:59 AM