Click here to Skip to main content
Click here to Skip to main content

Microsoft Dynamics CRM 4.0 Forms with Google Maps IFrame

, 27 Nov 2009
Rate this:
Please Sign up or sign in to vote.
Mapping CRM 4.0 using Google Maps inside IFrame form customization

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).

Lead2.JPG

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).

    MapTab.JPG

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

    MapTabProperties.JPG

    MapTabProperties2.JPG

  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:

Lead1.JPG

Lead2.JPG

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

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.
    //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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

AymanAminIbrahim
Technical Lead Ayman Soft
Egypt Egypt
With more than 16 years of IT experience, traveled to 6 different countries and worked in many multi-culture environments. Since returning from Sydney To stay in Cairo i have been working for a Microsoft partner in the middle east, focusing on Microsoft Dynamics CRM 4.0 platform, a very interesting business application platform that has state of the art application design and architecture with rich extension tools for developers.
Hope to help some one out there with an idea or a code example .. Smile | :)

Comments and Discussions

 
GeneralMy vote of 1 Pinmemberg0got24-Dec-09 12:02 
GeneralA different fix for the latency issue Pinmemberperesotti4-Dec-09 3:19 
GeneralRe: A different fix for the latency issue PinmemberAymanAminIbrahim9-Dec-09 21:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140814.1 | Last Updated 28 Nov 2009
Article Copyright 2009 by AymanAminIbrahim
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid