Coordinates
1. Concept
Using a google map you can allow your users to set locations by simply dragging a marker on the map.
2. How It Works
Two fields - one for longitue and one for latitude - are updated as the marker is dragged on the map. These fields could be hidden as well. Putting them into a form and adding a submit button is all you need to allow users to update locations.
3. Download
Latitude: <input class="required" type="text" name="latitude" id="latitude" value="53.34870686020199" />
Longitude: <input class="required" type="text" name="longitude" id="longitude" value="-6.267356872558594" />
<br /><br />
<div id="map" style="width: 600px; height: 420px"></div>
<!-- add your map api key here -->
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key="></script>
<script type="text/javascript">
<!--
if (GBrowserIsCompatible())
{
// create map and add controls
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// set centre point of map
var centrePoint = new GLatLng('53.34870686020199', '-6.267356872558594');
map.setCenter(centrePoint, 14);
// add a draggable marker
var marker = new GMarker(centrePoint, {draggable: true});
map.addOverlay(marker);
// add a drag listener to the map
GEvent.addListener(marker, "dragend", function() {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("latitude").value = point.lat();
document.getElementById("longitude").value = point.lng();
});
}
//-->
</script>


4. Comments
Paulo Antunes
22 December 2007
Hi Ben,
Great application!!
I was looking for to get coordinates by an street address.
Is this available? for free access.
I'm trying to find some street address coordinates to see them in Google Earth.
Would you give me any hint on how to get this?
Merry Christmas!
Paulo Antunes - +55 11 9135 5188
São Paulo - Brazil
Ben
26 December 2007
hi paulo, i will be posting this in the (hopefully) near future. in the meantime, here is a link to the google maps geocoder, which can be used to get coordinates from addresses:
http://code.google.com/apis/maps/documentation/services.html#Geocoding
good luck!
Andrew (Ireland)
27 December 2007
well done on a great site. I've been looking for this kind of simple functionality for some time and to date I was jumping between a couple
of sites in order to find coordinates for geocaching etc. It might be a nice idea to add a page for converting different formats for coordinates also. These are readily available but it might be useful to have it in your site also. Thanks
Mark Bowen
12 May 2008
Hi Ben,
This looks really interesting. Well done on it. Just to answer the other question about getting co-ordinates for an address there is a way to do it without using any of the APIs if you want to. It involves going to the address in [url="http://maps.google.com"]Google Maps[/url] that you want to find the co-ordinates for and then using the following Javascript in your browser [i](make this a bookmark so that you can use it quickly)[/i]
[code]
javasc*ipt:void(prompt('',gApplication.getMap().getCenter()))
[/code]
[i]I have taken out a few of the letters above so that hopefully the code will show here. Hopefully it should be obvious what to replace the [b]*[/b] symbols with but if not then just get in touch with me and I can send you a file with the code in instead[/i]
Hope that helps.
Best wishes,
Mark
steve hess
30 May 2008
Hi Mark,
i am trying to use this concept...but allow users to give me their address first as the starting point...versus a hardcoded lat/lon. would you be willing to send me the script that would allow for that users input?
Ben
30 May 2008
hi steve,
i assume your question was directed at me? here is how i would do it.
address = "Dublin, Ireland"; geocoder = new GClientGeocoder(); geocoder.getLatLng(address, function(point) { if (!point) { alert(address + " not found"); } else { // set centre of map and add marker to centre of map and make it draggable map.setCenter(point, 12); var marker = new GMarker(point, {draggable: true}); map.addOverlay(marker); // add listener to marker GEvent.addListener(marker, "dragend", function() { var point = marker.getPoint(); map.panTo(point); document.getElementById("latitude").value = point.lat(); document.getElementById("longitude").value = point.lng(); }); } } );steve hess
30 May 2008
Hi Ben and thanks for the fast response! being a novice at this, could you show your code within the script tags in their entirety? not sure what to replace with your code. thanks again!
steve hess
30 May 2008
actually...scratch that...but question:
by leaving all else the same except for accepting a variable address, how does that affect this concept...it doesn't set the initial lat/lon in the form or change the center point. did that make sense?
<!--
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
if ("34.051" == "" || "-84.071" == "")
{
var address = "<% request.querystring("address")%>";
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address,
function(point) {
if (!point) {
alert(address + " not found");
}
else {
// set centre of map and add marker to centre of map and make it draggable
map.setCenter(point, 12);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
// add listener to marker
GEvent.addListener(marker, "dragend", function() {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("latitude").value = point.lat();
document.getElementById("longitude").value = point.lng();
});
}
});
}
else
{
var centrePoint = new GLatLng('34.051', '-84.071');
map.setCenter(centrePoint, 16);
var marker = new GMarker(centrePoint, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("latitude").value = point.lat();
document.getElementById("longitude").value = point.lng();
});
}
}
//-->
</SCRIPT>
Ben
30 May 2008
it will set the center point of the map to the address. in your code above this will only happen if either the latitude or longitude is blank. so the important line is:
if ("34.051" == "" || "-84.071" == "")
steve hess
30 May 2008
ok...gotcha...so i remove the lat/lon and the center point is now set.
so then is there a way to auto adjust the form fields so that the user doesn't need to move the marker for the form to recognize the center point coordinates?
Ben
30 May 2008
just add the following lines under map.setCenter(centrePoint, 16)
document.getElementById("latitude").value = point.lat();
document.getElementById("longitude").value = point.lng();
steve hess
30 May 2008
so close....I owe you Ben!
the form isn't taking new coordinates unless i move the marker. basically, i'm using a query pull the persons address...and have the form use the lat/lon from that as if they had dragged the marker....versus using the forms initial values. does that make sense?
here's my url:
http://66.155.125.63/maps_getcoordinates4.asp?address=atlanta, ga
here's the script:
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
if ("" == "" || "" == "")
{
var address = "<%=request.querystring("address")%>";
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address,
function(point) {
if (!point) {
alert(address + " not found");
}
else {
// set centre of map and add marker to centre of map and make it draggable
map.setCenter(point, 12);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
// add listener to marker
GEvent.addListener(marker, "dragend", function() {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("latitude").value = point.lat();
document.getElementById("longitude").value = point.lng();
});
}
});
}
else
{
var centrePoint = new GLatLng('34.051', '-84.071');
map.setCenter(centrePoint, 16);
document.getElementById("latitude").value = point.lat();
document.getElementById("longitude").value = point.lng();
var marker = new GMarker(centrePoint, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("latitude").value = point.lat();
document.getElementById("longitude").value = point.lng();
});
}
}
Ben
30 May 2008
it should be:
document.getElementById("latitude").value = centrePoint.lat();
document.getElementById("longitude").value = centrePoint.lng();
Stefan
13 September 2008
Wondering when this module is available. Would be an interesting asset to my site.
Ben
14 September 2008
this isn't a module, just some javascript code that i posted as an example of using google maps to set coordinates
noliy vise
26 September 2008
I can't use your stupid maps.
Dave P
12 February 2009
I am taking part in the "Boyne Riders" photographic Rally 2009. Thay have given a list of places with GP co-ordinates. I was hoping to use your site to locate positions and then mark them into my OSI Road Atlas which does not have co-ordinated. However I'm having problems. Example Dunlavin Courthouse is one location given as Nat GRid 87192 01689 or N 53 03.541 W6 42.017. When I position The Orange marker as close to these co-ordinates as possible, it shows me I'm in Wicklow Gap and Dunlavin is way off to the left! Am I doing something wrong or should I expect to be positioned over Dunlavin?
Thanks
Dave
Ben
13 February 2009
hi dave, i checked on google maps and the coordinates of dunlavin are 53.060199,-6.70372. you can get this by searching for dunlavin and once found click on the Link button on the right hand side. this gives you a url which contains the text &ll=53.060199,-6.70372, the latitude and longitude.
the National Grid coordinates you have are based on a different system of navigation and that is why you are off on the map, see http://www.ordnancesurvey.co.uk/oswebsite/freefun/geofacts/geo0667.html
Scott Baldwin
17 March 2009
Thank you for this very useful app. It would very nice for mariners to have the coordinates in degree, minutes, seconds. I found this page which does the conversion: http://www.fcc.gov/mb/audio/bickel/DDDMMSS-decimal.html
but it would be nice not to have to do this extra step.
Thanks again.
Pablo Bretado
01 April 2009
Hi dude please give me the source.... this is obsolutte they i need ...
please please
Ben
02 April 2009
the source was always available in the html, but i have now added it to the download section. enjoy!
ravi
09 April 2009
I want place the marker at original position when dragging is completed. Please help in this
vabs
22 September 2009
hi could u mail me the script that takes latitude and longitude as input to show maps
jeuue
07 February 2010
good job friends
Amarnath
10 February 2010
Hi,
I am able to place the marker on the map on any particular location(with location name as input or latitude and longitude as input).
But now i want to place the markers on the hospitals, banks etc (areas of interest) which are near to the particular input location.
How can I do this using javascript and google maps.
Mahmoud M. Abdel-Fattah
08 March 2010
Thanks a lot for sharing, I was looking for it long time a go !
Fabian
14 April 2010
Hi, Ben: good work!! I need a help with the code to apply this concept but not with draggable marker. I need the visitor can make zoom a move controls to the desired place and make click to update position. Because when they use dragable markers go to the desired place and lost the dragable marker in the process of making zoom. Thanks a lot
duminda
09 July 2010
hi ben,
This code seems really intersting. but when i paste it in visual studio, the
<input class="required" type="text" name="latitude" id="latitude" value="53.34870686020199" />
Longitude: <input class="required" type="text" name="longitude" id="longitude" value="-6.267356872558594" />
that input class="required" part gives an error telling no css class is defined.
Can you please help me out?
we should put this on the body of the page right?
Thank you
» View more comments
Leave A Comment