Custom Page, with Javascript/Google issue?
I have a custom page that is making a call out to the gogle maps API and
displaying a map.
I am slo using the API to calculate the mileage betweent two location, and
would like to update that info in a text field on the page, first parts
works, second part doesn't. Here is the code i am am using.
If i look at the error log in Chrome is, Uncaught TypeError: Cannot set
property 'innerHTML' of null?
Also, if i execute the follwing in the development console in Chrome then
the element does get updated. I am assuming this is come kind of DOM path
related issue? The javascript is being called from within an iframe, so
that might also be part of the problem?
document.getElementById('00Nb0000004zOiz_ileinner').innerHTML = '989';
Thanks
Gareth
<apex:page standardController="Opportunity">
<apex:pageBlock >
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Complex</title>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body style="font-family: Arial; font-size: 13px; color: red;">
<div id="map" style="width: 647px; height: 318px;"></div>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var startPostcode = "{!Opportunity.Warehouse_Postcode__c}";
var endPostcode = "{!Opportunity.R2_Shipping_Post_Code__c}";
var distanceInMeters;
var distanceInMiles;
var durationInSeconds;
var durationInMinutes;
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
var request = {
origin: startPostcode,
destination: endPostcode,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
distanceInMeters = response.routes[0].legs[0].distance.value;
distanceInMiles = Math.floor(distanceInMeters / 1609.344);
durationInSeconds = response.routes[0].legs[0].duration.value;
durationInMinutes = Math.floor(durationInSeconds / 60);
directionsDisplay.setDirections(response);
document.getElementById('00Nb0000004zOiz_ileinner').innerHTML =
distanceInMiles;
}
});
</script>
</body>
</html>
</apex:pageBlock>
</apex:page>
No comments:
Post a Comment