Posted in jQuery, ColdFusion | Posted on 03-16-2010 | 3,444 views
A reader asked:
First, let's create a simple map and listen for the page to be complete. We will then grab the Map object using ColdFusion's JavaScript API. This will give us a hook to the proper Google Map object.
2
3<head>
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
5
6<script>
7
8function init() {
9 map = ColdFusion.Map.getMapObject('mainMap')
10}
11</script>
12</head>
13
14<body>
15<h2>Bird Spotting Form</h2>
16
17<cfmap name="mainMap" centeraddress="Lafayette, LA" showcentermarker="false" zoomlevel="13">
18<p>
19Click on the map to record where you saw a bird.
20</p>
21
22<form id="mainForm">
23 <input type="submit" value="Send Report" id="submitButton" style="display:none">
24</form>
25
26</body>
27</html>
28<cfset ajaxOnLoad("init")>
I've got a simple map centered on my home town. I put a form at the bottom which is empty for now. The last line, ajaxOnLoad, simple tells ColdFusion what JavaScript I need to run when the page is done loaded. Right now my init() function simply grabs the Google Map object.
I then did a quick Google (is it weird to use Google to search for Google docs?) on map events and came across a pretty nice set of documentation. As powerful as Google's APIs are, I'm not always quite as pleased with their docs or ease of use. In this case, it looks like all we need to do is add a simple event listener. This event listener will be called with either an overlay object or a longitude/latitude pair:
2})
For my demo I decided that each click would simply take the longitude and latitude and add them as text fields to a form. I whipped up the following JavaScript:
2var counter;
3
4function init() {
5 counter = 0
6 map = ColdFusion.Map.getMapObject('mainMap')
7 GEvent.addListener(map, "click", function(overlay,latlng) {
8 if(latlng) {
9 counter++;
10 var s = '<b>Report '+counter+'</b>: '
11 s += '<input type="text" name="siteport_' + counter + '" value="'+latlng+'" size="50"><br/>'
12 $("#submitButton").before(s)
13 $("#submitButton").show()
14 }
15 })
16}
17</script>
For the most part this should be pretty trivial. I keep a counter so I can have unique numbers for each sighting. I used a text field with a dynamic name and value... and that's it. Here is a quick screen shot:
You can play with a demo here. Right now it isn't very exciting. We should probably add markers, and make the form a bit more complex. For example, most users probably don't need to see the actual latitude/longitude, but they probably want to enter data ("The bird was awesome, man. It had wings. And it flew. Cool."). In my next entry I'll add these features to the form.
For Example.)
Marker one location is in NY, marker two is in Louisiana, and marker three is in California, While NY is only in few it will only show NY, but if CALI comes in view it will show the marker in Cali, as well if it was two show Louisiana in view.
I'm rereading your comment and I think that may not _exactly_ match what you mean. Obviously if you set a marker to show at a 'low' zoom, then you would only see the CA one if you were zoomed in low enough. You can also notice when the view port changes. You could say, "If I'm in a range of these long/lat, I'm over CA so show marker X." Not sure how efficient it would be.
How would you adapt the js here to simply populate 1 existing input field and update it each time? I know its probably trivial but I cant figure it out...
thanks man.
Mike
$("#simple").append(latln)
Append should append to the value.... but double check that. If it doesn't, just do
$("#simple").val($("#simple").val() + "," +latlng)
Actually that second one is better as it adds the comma to keep it separate.
Actually (grin), that's bad since the lat and lng are separated with a comma. You REALLY don't want to use one field. But if you insist, use another delimiter like a @ sign. Or consider a textarea and use line breaks.
is this possible
This is damn useful, very simple. I even manage to retrieve address with little GClientGeocoder()tweak.
<script>
var counter;
function init() {
counter = 0;
var geocoder = null;
geocoder = new GClientGeocoder();
map = ColdFusion.Map.getMapObject('mainMap')
GEvent.addListener(map, "click", function(overlay,latlng) {
if(latlng) {
geocoder.getLocations(latlng, function(addresses) {
if(addresses.Status.code != 200) {
alert("reverse geocoder failed to find an address for " + latlng.toUrlValue());
}
else {
address = addresses.Placemark[0];
var myHtml = address.address;
document.getElementById("myaddress").innerHTML = myHtml;
}
});
}
})
}</script>
<span id="myaddress"></span>
[Add Comment] [Subscribe to Comments]