Freelance Development for Dynamics CRM: Intergration Google Maps v.3 into Microsoft Dynamics CRM 4.0

Friday, June 18, 2010

Intergration Google Maps v.3 into Microsoft Dynamics CRM 4.0

In this post I will describe how to integrate Google Maps v.3 with Microsoft Dynamics CRM 4.0 using IFrame customization.

1. I created simple html page with following code (I called this page MapIntegration.html):

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Map integration</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<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: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var address = location.search;
    address = address.substring(address.indexOf('=') + 1);
    codeAddress(address);
  }
  function codeAddress(address) {
    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>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

2. Copy this page into ISV subdirectory of your Microsoft CRM website:

3. Open customization form of entity you want to integrate Google Maps in, create new tab, new section and new iframe:

4. Insert following script to OnLoad event handler:

crmForm.all.tab4Tab.onclick = function()
{
 var url = "";
 if (crmForm.all.address1_country.DataValue != null)
  url = crmForm.all.address1_country.DataValue;
 if (crmForm.all.address1_city.DataValue != null)
  url += (url == "" ? "" : ", ") + crmForm.all.address1_city.DataValue;
 if (crmForm.all.address1_name.DataValue != null)
  url += (url == "" ? "" : ", ") + crmForm.all.address1_name.DataValue;
 if (crmForm.all.address1_line1.DataValue != null)
  url += (url == "" ? "" : ", ") + crmForm.all.address1_line1.DataValue;
 if (crmForm.all.address1_line2.DataValue != null)
  url += (url == "" ? "" : ", ") + crmForm.all.address1_line2.DataValue;
 if (crmForm.all.address1_line3.DataValue != null)
  url += (url == "" ? "" : ", ") + crmForm.all.address1_line3.DataValue;
 if (url != "")
 {
  url = "/ISV/gmap/mapintegration.html?address=" + url;
  crmForm.all.IFRAME_map.src = url;
 }
}

5. Save form, publish entity, check the result:

36 comments:

Unknown21 June 2010 at 19:27
Hi,
Thanks for this post i wanted to do this for a while but couldnt find a sample out there that worked for me. this did - so thank you.
It does how evernot show the location correctly. when i open the map tab, i get the following error - Geocode was not successful for the following reason: INVALID_REQUEST also the maps centres on a lake in south east australia even though the contacts are in the UK.
What am i doing wrong
ReplyDelete
Replies
Unknown21 June 2010 at 19:36
Hi.

Could you paste url you use for investigation? To get it modify code

crmForm.all.tab4Tab.onclick = function()
{
var url = "";
if (crmForm.all.address1_country.DataValue != null)
url = crmForm.all.address1_country.DataValue;
if (crmForm.all.address1_city.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_city.DataValue;
if (crmForm.all.address1_name.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_name.DataValue;
if (crmForm.all.address1_line1.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_line1.DataValue;
if (crmForm.all.address1_line2.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_line2.DataValue;
if (crmForm.all.address1_line3.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_line3.DataValue;
if (url != "")
{
url = "/ISV/gmap/mapintegration.html?address=" + url;
crmForm.all.IFRAME_map.src = url;
}
}

to code

crmForm.all.tab4Tab.onclick = function()
{
var url = "";
if (crmForm.all.address1_country.DataValue != null)
url = crmForm.all.address1_country.DataValue;
if (crmForm.all.address1_city.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_city.DataValue;
if (crmForm.all.address1_name.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_name.DataValue;
if (crmForm.all.address1_line1.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_line1.DataValue;
if (crmForm.all.address1_line2.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_line2.DataValue;
if (crmForm.all.address1_line3.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_line3.DataValue;
if (url != "")
{
alert(url);
url = "/ISV/gmap/mapintegration.html?address=" + url;
crmForm.all.IFRAME_map.src = url;
}
}

Once you clicked at the tab you will get widow with URL which is opening, click CTRL+C, paste it somewhere and copy the link and publish here. I will try to help you.
ReplyDelete
Replies
Unknown22 June 2010 at 11:14
thanks for the quick reply,after i changed the code i get Eror : - Navigation to the webpage was canceled (URL: res://ieframe.dll/navcancl.htm) IF i leave the iframe address as about:blank (as per your 2nd screenshot).
If i change the iframe url to where i placed the file - http://server/ISV/location.html i get this error - Geocode was not successful for the following reason: ZERO_RESULTS
does that make any sense?
ReplyDelete
Replies
Unknown22 June 2010 at 16:28
Could you paste code you use here?
ReplyDelete
Replies
Unknown22 June 2010 at 17:01
the post wont allow me to paste html tags so i pasted it here: http://pastebin.com/Mr9Chdeq
ReplyDelete
Replies
Unknown28 June 2010 at 11:45
any ideas where i m going wrong?
ReplyDelete
Replies
Unknown2 July 2010 at 10:36
I've already written - show me the url which passed to iframe source - and I will try to help you. Without this url - I can't help you.
ReplyDelete
Replies
Unknown2 July 2010 at 12:45
Hi,
I used your above code with the alert message to get the url.I am receiving the below url
/ISV/gmap/mapintegration.html?address=India,Chennai,Ambatur,AmbaturEstate
This what i am receiving as alert message
But the Map is not loading in the iframe
ReplyDelete
Replies
Unknown2 July 2010 at 12:47
Can you say me am i missing any thing????
What URL should i specify while creating the IFrame???
Please help me...
ReplyDelete
Replies
Unknown6 July 2010 at 15:14
hi andriy, sorry for late reply i was enjoying a long overdue holiday.
i do not understand what you mean by "show me the url which passed to iframe source"
do you mean the 'URL' field under the 'Name' section in the 'General' tab of the 'IFAME Properties' ?
If so - then the URL is http://crm/ISV/location.html
Sorry for all the questions, but i do not understand what you mean.
ReplyDelete
Replies
Unknown14 July 2010 at 13:56
can you not help?
are my answers not good ?
what else can i do?
ReplyDelete
Replies
Unknown22 July 2010 at 14:44
I ment that you should show me full URL you send to iframe like:

/ISV/location.html?address=Volynskaya 15, Kyiv, Ukraine
ReplyDelete
Replies
Unknown17 August 2010 at 00:53
sorry for delay in answering..
i had to concentrate on other matters, back i am back in to it now.
i removed all the customization for this and started afresh - with similar results.
so i added the alert and what i get now is a window opening titled 'message from webpage'
and inside "uk, Belfast, 10 Royal Ave" (which is the address of the contact)

There is no /ISV/location.html?adress
ReplyDelete
Replies
Unknown27 August 2010 at 17:59
Any progess on this?

Your message is before the /ISV bit is added on so that is why it doesn't appear

Andy
ReplyDelete
Replies
Unknown27 August 2010 at 18:08
Sorry? What progress you meant?
ReplyDelete
Replies
thomas66622 September 2010 at 17:23
hi,
thanks for the great post!
when i run the script withput crm, everything works fine, but when i try to run it with CRM i got error. i always get the error "Geocode was not successful for the following reason: ZERO_RESULTS". when i add the alert(url) to the code, nothing happend :-(
it seems that CRM can't fetch the adress...
thanks for your help!

@zaxxon: did u solve your problem? what was the prob, i think i have the same...

@zaxxon: how did u solve
ReplyDelete
Replies
Unknown22 September 2010 at 17:27
What code do you use? Can you post it here?
ReplyDelete
Replies
thomas66623 September 2010 at 10:29
i used this code:

crmForm.all.tab5Tab.onclick = function()
{
var url = "";
if (crmForm.all.address1_country.DataValue != null)
url = crmForm.all.address1_country.DataValue;
if (crmForm.all.address1_city.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_city.DataValue;
if (crmForm.all.address1_name.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_name.DataValue;
if (crmForm.all.address1_line1.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_line1.DataValue;
if (crmForm.all.address1_line2.DataValue != null)
if (url != "")
{
alert(url);
url = "/ISV/gmap/mapintegration.html?address=" + url;
crmForm.all.IFRAME_map.src = url;
}
}
ReplyDelete
Replies
Unknown23 September 2010 at 10:36
Hi. It seems that you forgot to add one line. Try to use following code:

crmForm.all.tab5Tab.onclick = function()
{
var url = "";
if (crmForm.all.address1_country.DataValue != null)
url = crmForm.all.address1_country.DataValue;
if (crmForm.all.address1_city.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_city.DataValue;
if (crmForm.all.address1_name.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_name.DataValue;
if (crmForm.all.address1_line1.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_line1.DataValue;
if (crmForm.all.address1_line2.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_line2.DataValue; // You Forgot this line

if (url != "")
{
alert(url);
url = "/ISV/gmap/mapintegration.html?address=" + url;
crmForm.all.IFRAME_map.src = url;
}
}
ReplyDelete
Replies
thomas66623 September 2010 at 10:54
hi. thanks for your fast replay.
it works now! :-)
thx and have a nice day!
ReplyDelete
Replies
Unknown10 December 2010 at 18:11
Hi,
Btw you've hidden the contact name, but the title of the window displays the contact name, thought you would like to hide this as well :)
Keep the good work btw and thanks for the material
ReplyDelete
Replies
Unknown10 December 2010 at 18:16
Thank you, an Eagleeyed.
I will remember it for the future articles.
ReplyDelete
Replies
Anonymous2 February 2011 at 17:48
Hi,
I'm trying to implement your solution, I do have everything working ok but the IFRAME doesn't load the map, even if I manually set an url for the google maps page, the map doesn't get loaded in the Iframe.
I always get two requests in IIS with an 200OK and 401. so strange. have you seen this before?

2011-02-02 14:49:38 10.0.0.1 GET /ISV/gmap/GoogleMap.html address=ENGLAND,%20london,%20Leeds%20Houses 80 - 10.13.48.28 Mozilla/4.0+(compatible;+MSIE+7.0;+Windows+NT+5.1;+Trident/4.0;+.NET+CLR+2.0.50727;+.NET+CLR+3.0.4506.2152;+.NET+CLR+3.5.30729) 401 2 5 252
2011-02-02 14:49:38 10.0.0.1 GET /ISV/gmap/GoogleMap.html address=ENGLAND,%20london,%20Leeds%20Houses 80 GLOBAL\Nuno.Costa 10.13.48.28 Mozilla/4.0+(compatible;+MSIE+7.0;+Windows+NT+5.1;+Trident/4.0;+.NET+CLR+2.0.50727;+.NET+CLR+3.0.4506.2152;+.NET+CLR+3.5.30729) 200 0 0 208
ReplyDelete
Replies
Anonymous2 February 2011 at 19:08
Can't believe was so simple, just a tick box... :)
ReplyDelete
Replies
Unknown2 February 2011 at 21:05
Have you solved your issue with unchecking "Restrict cross-framing scripting"?
ReplyDelete
Replies
Anonymous3 February 2011 at 11:32
Hi Andriy,

Yes that was the main issue, can I ask you how do you print the maps ?
I'm thinking possibly using a report to render the map will be a possible solution ?
ReplyDelete
Replies
Unknown3 February 2011 at 11:47
I'm afraid that I don't have an answer for this question...
ReplyDelete
Replies
Nuno Costa nuno.m.costa@gmail.com28 February 2011 at 00:23
Hi Andriy,
I found a solutionand post it on my blog on:
http://quantusdynamics.blogspot.com
thought you would like to know.
ReplyDelete
Replies
Michael Kalinovich2 June 2011 at 15:40
Why so complicated?
Try it :>
crmForm.all.IFRAME_googlemaps.src = "http://maps.google.com/maps?q=" + crmForm.all.address1_line1.DataValue + "+" + crmForm.all.address1_city.DataValue + "+" + crmForm.all.address1_country.DataValue ;
ReplyDelete
Replies
Unknown2 June 2011 at 15:59
Thank you for suggestion. It works, but anyway approach provided in the article - works too and it was used by me in several deployments and with other developers and customizers as far as I know.
ReplyDelete
Replies
Unknown7 August 2012 at 10:47
hi,
Am trying to show two locations in same google map.
Am successful with showing one location...
please help me as soon as possible...

Thanks in advance,
Sowmya
ReplyDelete
Replies

Add comment