Integrate Google Maps in CRM 2011

Posted: October 2, 2012 in Code Snippets, CRM 2011

Display Google Maps in CRM 2011

In my example im gonna display google map in crm 2011 using a html webresource and pin the default location to Hyderabad India.
Here we need to refer google api script in the html page.

<html>
<head>
    <title>Map</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
    <script type="text/javascript" src="../WebResources/crm_googleMap.js"></script>
</head>
<body onload="InitializeMap()">
    <div id="map_canvas" style="width: 100%; height: 380px;">
    </div>
</body>
</html>

Here is the code for the body onload jscript

var geocoder = null;
var map = null;
function InitializeMap() {
    if (typeof google !== "undefined") {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(17.384509, 78.486156);
        var myOptions = {
            zoom: 15,
            center: latlng,
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        codeLatLng(latlng);
    }
}

function codeLatLng(latlng) {
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (results != null && status != null) {
            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
                });
            }
            map.setZoom(10);
        }
    });
}

Add the html webresource in your entity form. In my example i have added it in Account Form as shown below.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s