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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

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


2532 Views

Avatar
GustyPolo

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 http://iglesiacristoviene.ca/direcciones.php 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 elremanentefiel.com/direcciones , 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, Direcciones.ss 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;

Direcciones.ss
_______________________________

<div>
<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.to.value, this.locale.value); return false">

<p><strong>Desde:</strong></p>

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

<p><strong>Hasta:</strong></p>

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

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

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

</form>

</div>
______________________________

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

<script src=" http://maps.google.com/?file=api&amp;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>

google.js
_______________________

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 Page.ss

<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.

Thanks

Gusty