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:

  1. 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
  2. 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
  3. 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
  4. Could you paste code you use here?

    ReplyDelete
  5. the post wont allow me to paste html tags so i pasted it here: http://pastebin.com/Mr9Chdeq

    ReplyDelete
  6. any ideas where i m going wrong?

    ReplyDelete
  7. 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
  8. 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
  9. Can you say me am i missing any thing????
    What URL should i specify while creating the IFrame???
    Please help me...

    ReplyDelete
  10. 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
  11. can you not help?
    are my answers not good ?
    what else can i do?

    ReplyDelete
  12. I ment that you should show me full URL you send to iframe like:

    /ISV/location.html?address=Volynskaya 15, Kyiv, Ukraine

    ReplyDelete
  13. 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
  14. Any progess on this?

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

    Andy

    ReplyDelete
  15. Sorry? What progress you meant?

    ReplyDelete
  16. 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
  17. What code do you use? Can you post it here?

    ReplyDelete
  18. 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
  19. 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
  20. hi. thanks for your fast replay.
    it works now! :-)
    thx and have a nice day!

    ReplyDelete
  21. 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
  22. Thank you, an Eagleeyed.
    I will remember it for the future articles.

    ReplyDelete
  23. 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
  24. Can't believe was so simple, just a tick box... :)

    ReplyDelete
  25. Have you solved your issue with unchecking "Restrict cross-framing scripting"?

    ReplyDelete
  26. 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
  27. I'm afraid that I don't have an answer for this question...

    ReplyDelete
  28. Hi Andriy,
    I found a solutionand post it on my blog on:
    http://quantusdynamics.blogspot.com
    thought you would like to know.

    ReplyDelete
  29. 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
  30. 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
  31. 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
    1. Hello,
      How can I help you?

      Delete
    2. hi Andrii,
      I used the following code to display the map in my iframe in crm 2011.
      It worked fine... Now i need to show two locations in the same map at a same time...
      how can i do it?
      Please help me...

      function map()
      {
      var maps="";
      maps=maps+"Dallas"+"+";
      maps=maps+"TX"+"+";
      maps=maps+"USA"+"+";
      maps="http://maps.google.com/?q="+maps+"&output=embed&t=m";
      Xrm.Page.getControl("IFRAME_ServiceAreaMap").setSrc(maps);
      }


      Thanks,
      Sowmya

      Delete
    3. Hello,
      This would not work for this case.
      You will have to pass somehow 2 addresses to IFrame and use Geolocation webservice to get latitude an longitude of address and then show points on map. I have an idea to publish solution for CRM 2011 and Google maps but I can't tell you when I will have time for it.

      Delete
    4. Hi!

      Thank you so much Andrii for your prompt reply!!!
      Please make it as soon as possible...

      Thanks,
      Sowmya

      Delete
    5. Unfortunately I can't promise. I have heavy workload at the moment.

      Delete