Search

Wednesday, January 27, 2010

Google Maps in CRM

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.

Blocks of JavaScript code below show how the Geocoding magic is called:
<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>Google Maps JavaScript API v3 Example: Geocoding Simple</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: 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 = "kuala lumpur, malaysia";
        else
            xxx = document.URL.substring(document.URL.indexOf('?') + 9, document.URL.length);
        xxx = xxx.replace(/%20/gi, ' ');
//        alert(xxx);
        var address = xxx;
        var image = 'new.gif';
        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,
                        icon: image
                    });
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }
    }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize(); codeAddress();">
<div id="map_canvas" style="width:600px; height:400px;"></div>
</body>
</html> 

After that, just right click your .aspx file and view in browser.

Implement into CRM

  1. Create a IFrame in CRM page.
  2. Set the appropriate properties.

You should see Google Maps in CRM like this:




















For more information in using Google Maps API, click this.

No comments:

Post a Comment