Drag map pointer and submit coordinates to DB

Railo4 / MySQl 5

In my real estate site, I have google maps on all property listings. The coordinates are pulled from my "map" table  however sometimes google geocoding is wrong, and I need to update the long & lat fields in my map table to the correct coordinates. I'd like to be able to do this by drag and drop the pin on the correct location and have that update my DB.

Here is a JS Fiddle that has the drag and drop functionality I want, but how do you go about getting these coordinates in a form to submit an Update?
http://jsfiddle.net/kjy112/QvNUF/

Thanks!
Bang-O-MaticAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bang-O-MaticAuthor Commented:
Anyone?
0
Tom BeckCommented:
I looked at your fiddle when you first posted this question because I was curious as to how dropping a pin on a map rendered in a browser could get you exact coordinates down to the building level. Since you are dealing with property listings, I assumed that that's the level of accuracy you wanted. But a browser window with a picture of a map and a GPS positioning system are two different things. I didn't think it possible. And sure enough, when I zoomed all the way in to building level, dropping a pin produced coordinates that were only accurate to about one city block. Not to individual buildings.

But if that's accurate enough, simply put the resulting coordinates in a text box or hidden field inside a form and POST them back to your server. I cannot speak to any Cold Fusion methods however.
0
Bang-O-MaticAuthor Commented:
Hi, on line 13 of the fiddle  you see:

google.maps.event.addListener(myMarker, 'dragend', function(evt){
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});

Change
 toFixed(3) +  

to

toFixed(6) +

and it will get right down to within a few meters.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tom BeckCommented:
That's awesome. It's a good day when I learn something new.

Can't help much with Cold Fusion, but I added a form on this updated fiddle and a line of javascript to populate the hidden field. Change the action attribute to your server side handler and retrieve the new coordinates from there and update the database.

http://jsfiddle.net/tommyBoy/QvNUF/545
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bang-O-MaticAuthor Commented:
Thanks! that will get me started.
0
Bang-O-MaticAuthor Commented:
Hi Tom,

When I ran that code and dump the variable "Form.current_hide"

It just says empty string. Any ideas? Thanks




<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by kjy112</title>
 
 
   
      <script type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
   
 
  <style type='text/css'>
    #map_canvas{
    width: 100%;
    height: 800px;
}

#current{
     padding-top: 25px;
}
  </style>
 
</head>
<body>

 
 
 <div id='map_canvas'></div>
<div id="current">Nothing yet...</div>
<form id="form" action="mappointerupdate.cfm"  method="post">
    <input type="hidden" id="current_hide" />
    <input type="submit" value="Update Coords" />
</form>


<script type='text/javascript'>

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 1,
    center: new google.maps.LatLng(35.137879, -82.836914),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(47.651968, 9.478485),
    draggable: true
});

google.maps.event.addListener(myMarker, 'dragend', function(evt){
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(6) + ' Current Lng: ' + evt.latLng.lng().toFixed(6) + '</p>';
    document.getElementById('current_hide').value = evt.latLng.lat().toFixed(6) + ',' + evt.latLng.lng().toFixed(6);
});

google.maps.event.addListener(myMarker, 'dragstart', function(evt){
    document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});

map.setCenter(myMarker.position);
myMarker.setMap(map);

</script>


 
</body>
</html>

------------------------


action page:

<cfparam name="form.current_hide" default="">
 <cfoutput> <cfdump var= "#form.current_hide#"> </cfoutput>
0
Bang-O-MaticAuthor Commented:
Tom, never mind I figured it out, I just had to add "name" on the form field:

<input type="text" name="current_hide" id="current_hide" />
0
Tom BeckCommented:
Since I cannot speak to the CF syntax the only suggestion I can give is to add a value and see if that shows up like: <input type="hidden" id="current_hide" value="test" />. If it does then the problem is in assigning the value in the google map javascript. Also, I would id the form with "form1" or something other than "form". Too confusing.
0
Bang-O-MaticAuthor Commented:
Hi Tom, I had figured it out, see post just above your last.

Thanks again for the help!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.