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="https://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="https://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>
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="https://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="https://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>
Nice work Navish..
Reply DeleteThanks Mayank
Reply Delete