Integrate Google Maps (or Bing) with CRM 2011

Integrating Google Maps or Bing Maps with Microsoft Dynamics CRM is a requirement that we often come across.
This blog will demonstrate how to add a new button to the CRM account entity and when clicked it will display the map of the address in a new browser window.

Integrating Google Maps or Bing Maps with Microsoft Dynamics CRM is a requirement that we often come across.
This blog will demonstrate how to add a new button to the CRM account entity and when clicked it will display the map of the address in a new browser window.
This example worked of course with CRM 4.0, but we would like to show you how to do this in CRM 2011 (can be implemented online or on-premise)
The first thing that we need is to do is find a 16x16 image and a 32x32 image to place on the ribbon, as well as create a javascript file and function that will open up the new window.
The following function will retrieve the fields from the account form and pop up a new window:

function showGoogleMap() {
// Get the values from the form

  var street1Field = Xrm.Page.data.entity.attributes.get("address1_line1");
  var cityField = Xrm.Page.data.entity.attributes.get("address1_city");
  var stateField = Xrm.Page.getAttribute("address1_stateorprovince");
  var postalField = Xrm.Page.data.entity.attributes.get("address1_postalcode");

  var address = street1Field.getValue();
  address = address + ', ' + cityField.getValue();
  address = address + ' ' + stateField.getValue();
  address = address + ' ' + stateField.getValue();
  address = address.replace(/ /g, "+");

  var url = 'http://maps.google.com/maps?f=q&source=s_q&hl=en&vps=1&jsv=156c';
  url = url + '&q=' + address;

  window.open(url);
}

 

Note that we are using the new Xrm.Page namespace in our Javascript function.
Now save the javascript file, and we will upload the files (Web Resources) to our CRM Server.

  • In your CRM application, Click on Settings and then click on Solutions under the Customization section.
  • Click on New to create a new Solution. In the popup window enter the Display Name, Name and Published:
  • Save the Solution.
  • Under Components -> Entities, click on Add Existing Entity, and add the account entity
  • Click on Web Resources and add the javascript file
  • Do the same for the two image files.
  • When complete, your solution's web resource should look something like this:
  • Click on Publish All Customizations, and then Save and Close

The next step that we need to do is to modify the Customizations Xml file, so that the button appears on it and assign the images and scripts to the button. In order to do that we need to export the Solution, and modify it in an Xml Editor (or Notepad). In this case, we would recommend an Xml Editor.

  • In the Solutions Window, select the accountSolution Solution, and click on Export.
    Since you already published your customizations, you can skip the first wizard page and click Next.
    • Click Next in the Export System Settings (Advanced) Page (do not check any of the boxes)
    • For now, keep the Package Type as Unmanaged, and click Next
    • Click on Export, Save the file and Extract the file.
  • Open the customizations.xml file in Microsoft Visual Studio

Locate the RibbonDiffXml section and paste the following code on top of it:

 


  
    "RentRoll.account.form.ShowMap.CustomAction" Location="Mscrm.Form.account.MainTab.Workflow.Controls._children" Sequence="268">