Posted in jQuery, ColdFusion | Posted on 01-18-2010 | 3,614 views
Earlier today a reader asked about driving directions and CFMAP. At lunch I worked on a quick proof of concept. Please note that this could be done better, cleaner, etc, but it works, and is kinda cool, so hopefully it is enough to get people started.
First, I began by looking at the reference guide for directions under Google Maps. It begins with the creation of a directions object. Once you have that, you can then load a query and have it auto-populate the results. And.... well that's it! You can tweak things up quite a bit as the docs show, but here is a quick example you can play with:
2
3<html>
4
5<head>
6<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
7<script>
8$(document).ready(function() {
9
10 $("#doDirections").click(function() {
11 var youraddy = $.trim($("#youraddress").val())
12 if(youraddy == '') return
13 console.log('Directions from '+youraddy)
14 var mapOb = ColdFusion.Map.getMapObject("themap")
15 var dir = new GDirections(mapOb, document.getElementById('result'))
16 <cfoutput>
17 dir.load("from: "+youraddy +" to: #theAddress#")
18 </cfoutput>
19 console.log('done')
20 })
21})
22</script>
23<style>
24#result {
25 width:500px;
26 height: 500px;
27 overflow: auto;
28
29}
30</style>
31</head>
32
33<body>
34
35<cfmap name="themap" centeraddress="#theAddress#" width="400" height="400" zoomlevel="9">
36<p>
37<form>
38Your Address <input type="text" name="youraddress" id="youraddress" value="San Francisco, CA"><br/>
39<input type="button" id="doDirections" value="Get Directions">
40</form>
41<p>
42
43<div id="result"></div>
44
45</body>
46</html>
I'm going to jump around a bit here so please forgive me. (I find that the way I write CFML does not lead itself well to actually teaching or writing about it well!) The very first line hard coded an address. This would be the store or other location you want to display to your users. At the bottom of the script you can see where I use this within the CFMAP tag. Below it I've created a simple form. I hard coded in San Francisco to save myself some typing.
Now if we hop back to the top you can see my jQuery code. I've bound to the button click action. I get the address and ensure something is there. Once I have it then I get the map object (that line of code should be moved up and out of this event handler, I shouldn't be regrabbing it for every click). I then make a new instance of the GDirections object. I give it my map and a pointer to my div that will be used for the results. (jQuery provides a way to do that of course but I forgot and was in a rush!) Next I do the load operation. This takes a string of the form:
from: somelocation to: somelocation
For my demo, the to is hard coded and the from is based on your input. And that's it. The result will get dumped into my div. If I wanted to I could extract out individual bits of it but for now it works fine as is. You can demo this here: http://www.coldfusionjedi.com/demos/jan182010/test3.cfm
One quick note - I warned folks this is a proof of concept so it shouldn't be used without more testing, but I want to point out one serious mistake that should be corrected. The jQuery document.ready event I use here can and probably will fire before the map is loaded. I should have used ColdFusion's ajaxLoad function to register the setup call. That's a 2 second fix but I wanted to make sure folks remembered that.
Cool find to get the directions.
I played around a bit with the ajaxOnLoad and ExtJS. Your right that the ajaxOnLoad will wait till the document is really ready since that is dependent on ExtJS (as is every CF ajax feature) I thought I would try and do it with ExtJS instead of jQuery.
Its pretty similar all in:
Ext.onReady(function(){
Ext.get('doDirections').on( 'click', function() {
youraddy=Ext.get('youraddress').getValue();
if(youraddy == '') return
console.log('Directions from '+youraddy)
var mapOb = ColdFusion.Map.getMapObject("themap")
var dir = new GDirections(mapOb, document.getElementById('result'))
<cfoutput>
dir.load("from: "+youraddy +" to: #theAddress#")
</cfoutput>
console.log('done')
});
});
In IE7 I get the following error: Line 31, Char 3, 'console' is undefined.
FF gives me a ton of CSS-errors in ext-all.css that ships with the CF AJAX-scripts though..., and the error all the way at the bottom that console is not defined. Hence no results there either
Darn, we just moved to CF8 last year, don't think they'll move to CF9 any time soon...
Maybe Railo 3.2 or higher (the version coming after Barry) will have this in it?
if you have time, I would be interested in a tutorial for this.
I notice that you have used ".click(function()" to generate the directions. I am new to all of this but want to be able to display directions when the page loads and / or when a link in a markerWindowContent is selected.
Any guidance in this would be greatly appreciated!
$(document).ready()
You can see I have that already. So basically, the .click handler would be removed - the meat of it would be kept though so it just plain runs.
<script>
$(document).ready(function() {
var youraddy = $.trim($("#searchaddress").val())
if(youraddy == '') return
console.log('Directions from '+youraddy)
var mapOb = ColdFusion.Map.getMapObject("themap")
var dir = new GDirections(mapOb, document.getElementById('result'))
<cfoutput>
dir.load("from: "+youraddy +" to: #theAddress#")
</cfoutput>
console.log('done')
})
</script>
That make sense?
i also added one alert after 1 click the btn to show me the directions but it does not fire that alert too, any idea
but the alert did not fired up, i even included the jquery code, but no sure, i can shar the online link too, if needed, let me know
Thanks
$("something").click
Then jQuery looks in the DOM _right_ then. If it can't find it, it does nothing.
If your cfwindow is pointing it's content to another file, then it's possible that is your issue. You can use jQuery's on method to bind in such a way that it would work post page DOM loaded (if that makes sense).
We are now getting into a level of tech support where I may have to push back on you a bit and ask about a consulting agreement. ;)
http://tinyurl.com/774vzp6
also, Explian me your this point, DOm already gets loaded,
If your cfwindow is pointing it's content to another file, then it's possible that is your issue. You can use jQuery's on method to bind in such a way that it would work post page DOM loaded (if that makes sense).
cfwindow fetches content of another file drive.cfm
$("#doDirections").click(function() {
should be
$("#doDirections").on("click",function() {
[Add Comment] [Subscribe to Comments]