+ Start a Discussion

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?







<apex:page standardController="Opportunity">
<apex:pageBlock >
<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"
<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 = {
mapTypeId: google.maps.MapTypeId.ROADMAP

var map = new google.maps.Map(document.getElementById("map"), myOptions);

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);

document.getElementById('00Nb0000004zOiz_ileinner').innerHTML = distanceInMiles;




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?


document.getElementById('00Nb0000004zOiz_ileinner').innerHTML = '989';







This means "document.getElementById('00Nb0000004zOiz_ileinner')" return NULL i,e, there is no element with the ID  "00Nb0000004zOiz_ileinner" .

OR when the java script is call then the element is no display in your VF page,that's why developer always prefer java script code at the end of code.


Please let me know if u have any problem on same and if this post helps you please throw KUDOS by click on star at left.




Seems like you are updating a field in standar layout. Well few things are you using the page as a inline VF page ?

Probably the inline VF page wont be able to access the components of standard layouts as VF pages are served from different domain. And due to cross domain policies JS are not allowed to access anythign from diff domain.

Hi Avidev,


Yes i am trying to update a field in a standard page from a VF page being displayed in and i-frame.


So, what would the way around it be, to create the field i want to update progmatically within the custom VF page and update that instead.


In which case, is there any way to map that field to the fetched record and save it for future use? We may also need to complete other calculations based on the value returned so it would need to be saved for the next page render?


Apologies for the stupid questions, still getting my head around the way everything works with SF!





Well how about committing the value to DB ? by doing an UPDATE using a actionFunction. This will make sure you have data in the field

By the way when you are assigning value using JS to the field its just changing the HTML and there is no change @Object/DB