Dynamics 365 for Sales — Embed Google Maps to show a Lat/Long Position
One of our clients recently had a requirement to show lat/long position on a map on an entity form (this was not an address, but an oil rig out at sea).
I used the following post on the Microsoft forums by Elderor as a starting point:
Firstly, you will need a Google Maps API key, to get one follow these instructions:
Once you have your API key, on the entity you want to show the map with the marker on create 2 new fields of type Decimal Number with a precision of 6 points and place these on the form.
Then create an HTML web resource with the following content:
Note: You must replace the following values:
YOUR-KEY: Replace this with your API key.
jn_latitude: Replace this with the field name that holds your latitude value.
jn_longitude: Replace this with the field name that holds your longitude value.
<html><head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY"></script>
<meta><meta><meta></head><body style="word-wrap: break-word;">
<div id="map-canvas"></div>
<script>
var map;
function initialize() {
// Retrieve the values from Dynamics CRM
var add1Lat = window.parent.Xrm.Page.getAttribute("jn_latitude").getValue();
var add1Long = window.parent.Xrm.Page.getAttribute("jn_longitude").getValue();
var add1Name = 'Position';
// Calculate the values and set options
var myLatlng = new google.maps.LatLng(add1Lat, add1Long);
var mapOptions = {
zoom: 15,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: add1Name
});
}
// Load the map
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body></html>
Finally, add the newly create web resource to your form and publish the changes.
Open a record of the type above and set the values in the latitude and longitude fields and refresh the page.
