Friday, 27 July 2012

Implement Google Map API in CRM 2011

In this article , I am going to explain how to use Google Map API in CRM 2011

In my custom entity have two attributes "new_fromaddress" and "new_toaddress" and i need to show Address Path direction using Google Map API
To display path , I created HTML web resource and in html web resource inserted two div panels
<div id ="directionpanel"  style="height: 390px;overflow: auto;width: 200px" ></div>
<div id ="map" style="height: 390px; width: 500px"></div>


To use Google API need to insert javascript Class
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

To find CRM main entity attributes need to insert Class
<script type="text/javascript" src="ClientGlobalContext.js.aspx"></script>

To initialize Google map , need to write javascript function InitializeMap()
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();

    function InitializeMap() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions =
        {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directionpanel'));

        var control = document.getElementById('control');
        control.style.display = 'block';
 }


and call this function on window load event.
window.onload = InitializeMap;


To show From and To addresses Path Direction , need to write function findDirection()
function findDirection() {
        var start = window.parent.Xrm.Page.getAttribute('new_fromaddress').getValue();
        var end = window.parent.Xrm.Page.getAttribute('new_toaddress').getValue();
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
}
and called this function after InitializeMap function
findDirection();


Complete HTML web resource code 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="ClientGlobalContext.js.aspx"></script>
    <script language="javascript" type="text/javascript">
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();

        function InitializeMap() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions =
        {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
            var map = new google.maps.Map(document.getElementById("map"), myOptions);

            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('directionpanel'));

            var control = document.getElementById('control');
            control.style.display = 'block';


        }



        function findDirection() {
            var start = window.parent.Xrm.Page.getAttribute('new_fromaddress').getValue();
            var end = window.parent.Xrm.Page.getAttribute('new_toaddress').getValue();
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });

        }


        window.onload = InitializeMap;
        findDirection();
    </script>
</head>
<body>
    <table id="control">
        <tr>
            <td valign="top">
                <div id="directionpanel" style="height: 390px; overflow: auto; width: 200px">
                </div>
            </td>
            <td valign="top">
                <div id="map" style="height: 390px; width: 500px">
                </div>
            </td>
        </tr>
    </table>
</body>
</html>










2 comments:

Note: only a member of this blog may post a comment.