A reader asked:
I had not really looked much at Google Maps before ColdFusion 9 introduced it to me, but if there is one thing I've learned - Google Maps can do pretty much about anything. This particular request is actually really darn easy. Here is one way to solve the problem. 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. <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> function init() { map = ColdFusion.Map.getMapObject('mainMap') } </script> </head> <body> <h2>Bird Spotting Form</h2> <cfmap name="mainMap" centeraddress="Lafayette, LA" showcentermarker="false" zoomlevel="13"> <p> Click on the map to record where you saw a bird. </p> <form id="mainForm"> <input type="submit" value="Send Report" id="submitButton" style="display:none"> </form> </body> </html> <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: 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: function init() { counter = 0 map = ColdFusion.Map.getMapObject('mainMap') GEvent.addListener(map, "click", function(overlay,latlng) { if(latlng) { counter++; var s = '<b>Report '+counter+'</b>: ' s += '<input type="text" name="siteport_' + counter + '" value="'+latlng+'" size="50"><br/>' $("#submitButton").before(s) $("#submitButton").show() } }) } </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.<html>GEvent.addListener(map, "click", function(overlay,latlng) { })<script> var counter;