I get asked periodically for examples on how to find GPS coordinates
for Google Map projects, picking locations on a map and saving them
into a database, etc.
So, below is a working example of how to use the free Google Maps API V3,
along with PHP to emulate getting GPS coordinates for a database.
You could use this for simply finding the exact GPS location anywhere.
Zooming in will focus the GPS on a very accurate spot on the earth.
Google no longer requires any API keys, so you can copy and paste both
scripts into your website and play around. The key part to set-up is the
initial GPS location (when it loads) and the zoom level. For my example,
it loads on the Minnesota Capitol with a zoom of 16. It also loads in
"map" view, but you could also initialize in "hybrid" or "satellite".
Here is my working example:
http://www.catpin.com/gps
Drag the marker around, switch Map views ... use it to find
exact GPS coordinates.
Here is the complete script you can copy and paste yourself.
Then upload to your own website.
PHP Code:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
//document.getElementById('posit').innerHTML = [
document.form1.lat.value = [
latLng.lat()];
document.form1.lon.value = [
latLng.lng()];
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(44.955440188735956, -93.10223236419678);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 16,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<style>
body{
font-family: arial;
font-size: 13px;
}
#mapCanvas {
width: 600px;
height: 500px;
float: left;
}
#infoPanel {
float: left;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
</style>
<div id="mapCanvas"></div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div id="info"></div>
<b>Closest matching address:</b>
<div id="address"></div>
<form id="form1" name="form1" action="add.php" method="post">
<b> Latitude:</b> <input type="text" id="lat" name="lat" size="18"> <br />
<b>Longitude:</b> <input type="text" id="lon" name="lon" size="18"> <br />
<input type="submit" name="submit" value="Add Point">
</form>
</div>
</body>
</html>
This is the PHP script called "add.php" ... that will process the GPS:
PHP Code:
<?php
$lat=$_POST['lat'];
$lon=$_POST['lon'];
echo"
This is the PHP script to process your GPS location:<br ?><br />
Latitude: $lat<br />
Longitude: $lon<br />
<br />
<br />
At this point, you would be adding it to a database, or asking<br />
for more information, comments, etc.
";
?>
A few ideas ....
1) You might want to create a map of where clients or businesses are located
within a city (who is closest to me?). You have your clients move the marker
to their business and click. It saves their GPS coordinate in a database for you to
use on a map (the closest business to me?) for your site visitors.
2) You can create locations for Geocaching (where people look for physical caches).
see
http://www.geocaching.com
3) Someone doing a family geneology project could use it to mark gravesite locations
for the GEDCOM database. Those GPS locations can be displayed on any other maps
that people would use to find family information.
4) A "meet me here" mobile phone app for physical social networking.
5) A "this is where I'm at now" mobile phone app for letting someone else know
where you're at. Or, the party is here.
The application I'm showing is the part where someone "marks" the location.
Once marked and stored in a database, any other web page or application can
use those markers on other Google Maps ... or ANY other mapping (like Bing),
because of the actual GPS coordinates.
The GPS coordinates are a physical location on the Earth. If you post the
GPS coordinates of where your house is at, anyone could punch them into
an online map (Google or anyone else), and pinpoint the location on a map.
Have fun!
.
Before you post, read our: 
