Microsoft Dynamics CRM 4.0 Forms with Google Maps IFrame

• Download source - 4.27 KB

Introduction

This article shall discuss how to use minimal JavaScript code that is required to integrate Google Maps mapping solution to Microsoft Dynamics CRM 4.0 Forms using IFrame customization technique. (Google Maps API terms of service and restrictions for developers).

This article can be used as a blueprint for a simple and straight forward implementation of a Google Map in Microsoft Dynamics CRM 4.0 to provide mapping solution for sales module and the Lead form as an example.

Background

One way to customize the Microsoft dynamics CRM 4.0 is to use IFrames from within the customization module in the application. This flexible way of extending the functionality of Dynamics CRM 4.0 open endless stream of enhancements that you can add to your CRM application passing dynamic values from /to CRM as parameters to control the IFrame application behaviour.

Using the Code

The solution strategy for applying Google Maps to Microsoft Dynamics CRM 4.0  Form is very simple:

1. First create a Google Maps Standalone web application that can be deployed on the Intranet.
2. Call that web application from Microsoft Dynamics CRM 4.0 Forms using a Simple IFrame Form Customization.

The attached files contain a compressed web application that is a single page Google Map web application (in my case it was ASP.NET) which takes a single Query String parameter that contains the address of the Map. This is the simplest way of applying a Google Maps on any generic web site, having the address as a parameter and using Google Map APIs to Geocode the English text address into a Map Marker information (latitude and Longitude) to display on a web page.

Blocks of JavaScript code below show how the Geocoding magic is called:

//
// Standard Google Map JavaScript API for Geocoding
//

<script type="text/javascript">
var geocoder;
var map;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function setGoogleMapDomain(myDiv, domain) {
    var frames = myDiv.getElementsByTagName('iframe');
    if (frames.length > 0) {
        window.frames[frames[0].id].document.domain = domain;
    }
}

function codeAddress() {
    var xxx;
    if (document.URL.indexOf('?') == -1)
        xxx = "Syndey, NSW";
    else
        xxx = document.URL.substring(document.URL.indexOf('?') + 9, document.URL.length);
    xxx = xxx.replace(/%20/gi, ' ');
    // alert(xxx);
    var address = xxx; 
    if (geocoder) {
        geocoder.geocode({ 'address': address }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
    });
    } else {
        alert("Geocode was not successful for the following reason: " + status);
        }
    });
}
}
</script>

The single web page web solution attached is just a direct Google Maps JavaScript APIs implementation to have Google Maps working from an Intranet Web site that is deployed on IIS. This web solution should be tested alone first to make sure Google Maps works fine for any given address in the example format (street no space street name space street comma district name space City Comma space State).

Then the following steps will show how to use this internal web site solution from within Dynamics CRM 4.0 Lead form to provide an instant Google Maps IFrame based customization to show the Map display for any given Lead address information.

1. From inside Microsoft Dynamics CRM 4.0, create a Form Customization for the Lead Entity.
2. Create a new Form Tab and name it Map.
3. Inside this new Tab, create an IFrame and name it IFRAME_GoogleMap (as per the screen shot below).

   

4. Set the properties of the IFrame as per the two screen shots below:

   

   

5. Now for the Form to have the Google Map Display in the IFrame and change the Map whenever a Lead is Loaded or Saved... create a JavaScript event handler for the OnLoad Event of the Form and paste the attached JavaScript code named OnLoad.js.
6. Then create another JavaScript event handler for the OnSave Event of the Form and paste the attached JavaScript code named OnSave.js.

Now after publishing the Lead Form customization in Microsoft Dynamics CRM 4.0 application, any new Lead that is saved with an address information or loaded after being saved with a correct address information will have the Map Tab receives the Focus and Google Map information shall display correctly as per the screen shots below:

Hmm.. Amazing isn't it .. ;-)

Points of Interest

• This example implementation uses The Google Maps API v3 which by design is very similar to version 2 of the API but as Google claims much has changed under the hood to enhance speed and portability, etc., please find more information here for further research.
• During my testing phase, I came across a latency issue in loading the Google Map inside CRM Lead Form and I had to press CTRL+F5 repeatedly to have the map displayed so to work around this problem I added the following JavaScript code to the Onload Event handler before refreshing the IFrame Data source to have Focus on the Map Tab when the Lead Form Loads and after it is saved on the OnSave event handler.
  JavaScript

  //Inside the OnLoad Form Event Handler
  crmForm.all.tab2Tab.click(); 
  //And Inside the OnSave Form Event Handler for Force a Page Refresh 
  window.location.reload(true); 

• The JavaScript APIs code uses the optional parameters ll (Latitude and Longitude) as well as spn (Span) specified as magic numbers inside the JavaScript code (-34.397, 150.644). This will have the effect of instructing the Google Maps Geocoding service to have the passed addresses resolution biased towards Sydney, Australia viewport bounding box to simplify the address resolution in my example.
• Further enhancements to this code can be sought to elegantly resolve the Google Map display latency issue in Dynamics CRM 4.0 Lead Form as well as to modify the JavaScript APIs code to have a more generic address resolution for other parts of the world.

History

This is my final version for publication.