Solved

Drag map pointer and submit coordinates to DB

Posted on 2014-07-18
9
384 Views
Last Modified: 2014-07-23
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!
0
Comment
Question by:Bang-O-Matic
  • 6
  • 3
9 Comments
 

Author Comment

by:Bang-O-Matic
ID: 40211491
Anyone?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40211981
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
 

Author Comment

by:Bang-O-Matic
ID: 40212824
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40212865
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
 

Author Closing Comment

by:Bang-O-Matic
ID: 40212880
Thanks! that will get me started.
0
 

Author Comment

by:Bang-O-Matic
ID: 40215094
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
 

Author Comment

by:Bang-O-Matic
ID: 40215203
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40215231
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
 

Author Comment

by:Bang-O-Matic
ID: 40215482
Hi Tom, I had figured it out, see post just above your last.

Thanks again for the help!
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now