Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Google Map To And From Maps

Go to End



Community Member, 9 Posts

9 October 2009 at 10:44am

Hey, I was wondering if I could get some help. I'm trying to create a to and from map form google. I've made one before not suing silverstripe and it works perfectly. Here's the example it's for a spanish church. So what the user does is they put their address in from (desde) field and since the to (hasta) field is preset to the locaiton they just submit and the map updates with the directions shown on the bottom. I'm trying to get the same thing done for another website , but tis time using silverstripe. What I thought was going to be straight forward isn't exactly. I figured that since this part wasn't going to be updated I could create a new page, and Direcciones.php and just put in everything there. At first glass, it all works perfect, but the problem comes when I want to put in a new address. Once I submit it takes me to my home page. Any ideas? Here are the main parts of code;

<div id="map_canvas"></div>

<div id="addressform">

<p>Para conseguir direcciónes hacia el templo escriba su direcci&oacute;n en la casilla &quot; <strong>Desde&quot;</strong> y presione el bot&oacute;n <strong>&quot;Obtener</strong>.&quot;</p>

<form action="#" onsubmit="setDirections(this.from.value,, this.locale.value); return false">


<input type="text" class="adresses" id="fromAddress" name="from" value="Lester B Pearson Int'l Airport"/>


<input type="text" class="adresses" id="toAddress" name="to" value="80 Royalcrest Road, Toronto, Ontario. M9V 4C1" />

<select id="locale" name="locale">
<option value="es"selected>Spanish</option>
<option value="en">English</option>
<option value="fr">French</option>

<input name="submit" type="submit" value="Obtener" />



Here's the Js file which i linked on my main like so along with my API key

<script src=";v=2.x&amp;key=ABQIAAAA4_CEaXFTVzb07PAu2uL-rhR7k_ABripYysp6FSAv_6idJ73P1xTjp7fy5W-BiORC9YjJJ2splqKICw" type="text/javascript"></script>

<script src="mysite/javascript/google.js" type="text/javascript"></script>


var map;
var gdir;
var geocoder = null;
var addressMarker;

function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
gdir = new GDirections(map, document.getElementById("directions"));
GEvent.addListener(gdir, "load", onGDirectionsLoad);
GEvent.addListener(gdir, "error", handleErrors);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

setDirections("970 Dixon Road, Toronto, ON M9W 1J9, Canada (Lester B Pearson Int'l Airport)", "80 Royalcrest Road, Toronto, Ontario. M9V 4C1", "es");

function setDirections(fromAddress, toAddress, locale) {
gdir.load("from: " + fromAddress + " to: " + toAddress,
{ "locale": locale });

function handleErrors(){
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

// else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) <--- Doc bug... this is either not defined, or Doc is wrong
// alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_BAD_KEY)
alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);

else alert("An unknown error occurred.");


function onGDirectionsLoad(){
// Use this function to access information about the latest load()
// results.

// e.g.
// document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
// and yada yada yada...


Also to get the map to load I had to play this on the <body> tag in the main

<body onload="initialize()" onunload="GUnload()">

Like I said the script and everything works since it loads the map along with the directions, but it goes wonky once I submit a new address.

Any help would be awesome.