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:
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
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.
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?
Could you paste code you use here?
the post wont allow me to paste html tags so i pasted it here: http://pastebin.com/Mr9Chdeq
any ideas where i m going wrong?
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.
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
Can you say me am i missing any thing????
What URL should i specify while creating the IFrame???
Please help me…
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.
can you not help?
are my answers not good ?
what else can i do?
I ment that you should show me full URL you send to iframe like:
/ISV/location.html?address=Volynskaya 15, Kyiv, Ukraine
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
Any progess on this?
Your message is before the /ISV bit is added on so that is why it doesn't appear
Andy
Sorry? What progress you meant?
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
What code do you use? Can you post it here?
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;
}
}
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;
}
}
hi. thanks for your fast replay.
it works now! 🙂
thx and have a nice day!
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
Thank you, an Eagleeyed.
I will remember it for the future articles.
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 GLOBALNuno.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
Can't believe was so simple, just a tick box… 🙂
Have you solved your issue with unchecking "Restrict cross-framing scripting"?
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 ?
I'm afraid that I don't have an answer for this question…
Hi Andriy,
I found a solutionand post it on my blog on:
http://quantusdynamics.blogspot.com
thought you would like to know.
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 ;
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.
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
Hello,
How can I help you?
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
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.
Hi!
Thank you so much Andrii for your prompt reply!!!
Please make it as soon as possible…
Thanks,
Sowmya
Unfortunately I can't promise. I have heavy workload at the moment.