I’m using a theme called “liwa” but the theme isn’t the problem. I tired 5 other themes and still had the same problem. I even used a blank slate theme and the trip planner did not display correctly.
<!–Google Provided Code
<html>
<head>
<script language=”javascript” type=”text/javascript”>
// Customize the strings below this line.
var zip = “60603”; // Narrow start address to this locality
var startMessage = “Start address”;
var endMessage = “Destination address”;
// End of customization block
// Get and parse the user’s current date/time
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var twoDigits = function(x) { return (x < 10 ? ‘0’ : ”) + x };
var currentTime =
((hours % 12) || 12) + // Show 0 as 12.
‘:’ + twoDigits(minutes) +
(hours > 11 ? ‘pm’ : ‘am’);
var currentDate =
twoDigits(date.getMonth() + 1) +
‘/’ + twoDigits(date.getDate()) +
‘/’ + (date.getFullYear() % 2000);
// Setup From/To input field interaction.
function setupGFormInput(field, message) {
var onFocus = function() {
if (this.value == message) {
this.className = ‘g-wp’;
this.value = ”;
}
};
var onBlur = function() {
if (this.value == ”) {
this.className = ‘g-empty’;
this.value = message;
}
};
field.onblur = onBlur;
field.onfocus = onFocus;
onBlur.apply(field);
};
// Builds the destination URL
function submitGForm() {
var loc = ‘https://www.google.com/maps?ie=UTF8&f=d&’;
var dirflg = ‘r’;
for (var i = 0; (i < document.gForm.length – 1); i++) {
var e = document.gForm[i];
if (e.name == ‘saddr’) {
loc += e.name + ‘=’ +
encodeURIComponent(e.value) + (zip ? ‘+near+’ + zip : ”) + ‘&’;
} else if (e.name == ‘pref’) {
dirflg += e.value;
} else {
loc += e.name + ‘=’ + encodeURIComponent(e.value) + ‘&’;
}
}
loc += ‘dirflg=’ + encodeURIComponent(dirflg);
location.href=loc;
return false;
}
</script>
<style type=”text/css”>
/* Compatibility */
.g-planner { font-size: 10pt; font-family: arial; line-height: 14pt; }
.g-planner input { font-size: 100%; padding: 2px }
.g-planner input.g-submit { font-size: 90% }
.g-planner select, .g-dt input { font-size: 90% }
.g-planner img { border: 0 }
/* Widths: */
.g-planner { width: 18.5em }
.g-wplab { width: 1.5em }
.g-wp input { width: 16.1em }
.g-ttype { width: 8em }
.g-time { width: 4.5em }
.g-date { width: 5.5em }
.g-preflab { width: 4em; display: inline-block }
.g-pref select { width: 15.5em }
.g-planner {
border: solid 1px #aaa;
border-radius: .75em;
padding: 1em .5em .5em 1em;
}
.g-logo {
color: #36c;
font-family: arial;
font-size: 12pt;
font-weight: bold;
margin-bottom: 1em;
}
.g-empty { color: #666; }
.g-wp input, .g-dt input {
border: 1px solid;
border-color: #ccc #ccc #999;
}
.g-wp img { position: relative; top: 2pt; }
.g-dt { margin-top: 1.5em; margin-bottom: 1em; }
.g-ttype, .g-date { margin-right: .5em }
.g-ttype, .g-date, .g-time, .g-wplab { float: left }
.g-submit { text-align: right; margin: 1em .4em 0.5em 0 }
.g-pref { display: inline-block }
.g-clear { clear: both; }
}
</style>
</head>
<body>
<form name=”gForm” onsubmit=”return submitGForm()” action=”https://www.google.com/maps”>
<div class=”g-planner”>
<div class=”g-logo”>
<img src=”https://www.google.com/images/logos/maps_logo_sm.gif”
alt=”Link to Google Transit Trip Planner” align=”middle”>
<div>Get transit directions</div>
</div>
<div class=”g-wp”>
<div class=”g-wplab”>
<label for=”gForm_saddr”>
<img src=”https://maps.google.com/intl/en_us/mapfiles/dd-icon-start.gif” alt=”Start address”>
</label>
</div>
<input type=”text” name=”saddr” maxlength=”512″ title=”Start address” id=”gForm_saddr”>
</div>
<div class=”g-wp g-clear”>
<div class=”g-wplab”>
<label for=”gForm_daddr”>
<img src=”https://maps.google.com/intl/en_us/mapfiles/dd-icon-dest.gif” alt=”Destination address”>
</label>
</div>
<input type=”text” name=”daddr” maxlength=”512″ title=”Destination address” id=”gForm_daddr”>
</div>
<div class=”g-dt g-clear”>
<select name=”ttype” class=”g-ttype”>
<option value=”dep”>Leave</option>
<option value=”arr”>Arrive</option>
</select>
<input type=”text” name=”date” class=”g-date”
maxlength=”8″ title=”Enter the Date in MM/DD/YY format”
id=”gForm_date”>
<input type=”text” name=”time” maxlength=”7″ title=”Enter the Time in HH:MM AM or PM format”
id=”gForm_time” class=”g-time”>
<div class=”g-clear”></div>
</div>
<label class=”g-preflab” for=”gForm_pref”>Prefer</label
><div class=”g-pref”>
<select name=”sort” id=”gForm_pref”>
<option value=”def”>Best route</option>
<option value=”num”>Fewer transfers</option>
<option value=”walk”>Less walking</option>
</select>
</div>
<label class=”g-clear g-preflab”></label
><div class=”g-pref”>
<select name=”pref”>
<option value=””>Any mode</option>
<option value=”B”>Bus</option>
<option value=”S”>Subway</option>
<option value=”T”>Train</option>
<option value=”R”>Tram</option>
</select>
</div>
<script language=”javascript” type=”text/javascript”>
document.gForm[‘date’].value = currentDate;
document.gForm[‘time’].value = currentTime;
setupGFormInput(document.gForm[‘saddr’], startMessage);
setupGFormInput(document.gForm[‘daddr’], endMessage);
</script>
<div class=”g-submit g-clear”>
<input type=”submit” value=”Get Directions”>
</div>
</div>
</form>
</body>
</html>
–>
