Posted in Code Snippets, CRM, HTML, JavaScripts

Google Maps For Ms CRM Forms

Posted on by balugajjala

 

Recently , we have a requirement from client , to show the address on google maps. To achieve this requirement, By default we are going with Bing Maps. But if you goes with Bing Maps, It will asks the AcessKey (Not for trail instances). We have to buy the access key from MS. So client doesn’t approve this method. Alternately we are achieving the requirement thorough google maps via adding new WebResource as HTMl Page on a form.

Default On loading the form, It will shows the Hyderabad as base address with latitude and longitudes (17.384509, 78.486156).

Flow:-

Add  new section and place anywhere within your Account Form. Am  placing the new Section below the Address Composite Field and labeled the Section as “googlemaps”.

1.png

Place the cursor on the new section and click on insert – select new web-resource

4.png5

Add the new web resource with type Html as follows

5

 

Paste the following html code inside that Text Editor- Source

//Google Maps Code- with default Hyderabad location// //if u want to change then, change the latitude and Longitudes.

<html>
<head>
https://maps.googleapis.com/maps/api/js?sensor=false

 function Map() {
 var map_canvas = document.getElementById('map_canvas');
 var map_options = {center: new google.maps.LatLng(17.384509,78.486156),zoom: 16,mapTypeId: google.maps.MapTypeId.ROADMAP}
 var map = new google.maps.Map(map_canvas, map_options)
 var geocoder = new google.maps.Geocoder();
 var address = window.parent.Xrm.Page.data.entity.attributes.get('address1_composite').getValue();
 geocoder.geocode( { 'address': address}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) 
 {
 map.setCenter(results[0].geometry.location);
 map.setZoom(16);
 var marker = new google.maps.Marker({map: map, position: results[0].geometry.location});
 } 
 else {
 //alert("Geocode was not successful for the following reason: " + status);
 }
 });
 }
 google.maps.event.addDomListener(window, 'load', Map);

</head>
<body>


</body>
</html>
While uploading the code , word press doesn’t allowing some  lines of code at script and div. Please Go through Image.
 html

After Pasting the code, click on Add Option 

5.png

Next

6.png

Click on Save And Publish.6

Creating a new account record. , it will shows the Default Hyderabad location.Screenshot (328)

If we have data on the address composite field then Refresh the form and  it will shows the output as follows.

8.png

 

Crming- Enjoy 🙂