?
Solved

Drag map pointer and submit coordinates to DB

Posted on 2014-07-18
9
Medium Priority
?
400 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

800 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