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: