Get Neatly Formatted Address: Latlng -> Address Google Maps
I'm making a page that utilizes the Google Maps geocoder object to find a user entered address. I am able to find the lat/lng points, but I'd like to format the address (clean it up) so I can store the Lat, Lng and Address in 3 separate fields in a MySQL db. Here is my current code:
also feel free to criticize the current code in the scope of security, I'm completely new to the Gmaps API and not very skilled with js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAKgJa4e_5XNFRJJF7MsI1eRQN1RsnicNCcG4bidjiZE76b9vSTBTCbiFNb-LGPKHeiBuV_2yfnWNSTA" type="text/javascript">
</script>
</head>
<body>
Input address Here: <input type="text" name="locate_address" id="locate_address" />
<input type="button" name="locate_address" value="Locate Address" onclick="locateAddress()" />
<div>
<开发者_如何学Go;p id="lat">Lat: </p>
<p id="lng">Lng: </p>
<p id="address"></p>
</div>
<br />
<div id="map" style="width: 300px; height:300px"></div>
<script type="text/javascript">
function locateAddress() {
var address = document.getElementById('locate_address').value;
geocoder = new GClientGeocoder();
geocoder.getLatLng (
address,
function (point) {
if (!point) {
alert(address + " not found!");
}
else {
map.setCenter(point, 13);
var marker = new GMarker (point);
map.addOverlay (marker);
marker.openInfoWindowHtml(address);
document.getElementById('address').innerHTML = address;
document.getElementById('lat').innerHTML += point.y;
document.getElementById('lng').innerHTML += point.x;
}
})
}
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(39.1700149, -86.5148133), 13);
map.setMapType(G_NORMAL_MAP);
</script>
</body>
</html>
If you really want to use v2 API
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAKgJa4e_5XNFRJJF7MsI1eRQN1RsnicNCcG4bidjiZE76b9vSTBTCbiFNb-LGPKHeiBuV_2yfnWNSTA" type="text/javascript">
</script>
</head>
<body>
Input address Here: <input type="text" name="locate_address" id="locate_address" />
<input type="button" name="locate_address" value="Locate Address" onclick="locateAddress()" />
<div>
<p id="lat">Lat: </p>
<p id="lng">Lng: </p>
<p id="address"></p>
</div>
<br />
<div id="map" style="width: 300px; height:300px"></div>
<script type="text/javascript">
function locateAddress() {
var address = document.getElementById('locate_address').value;
geocoder = new GClientGeocoder();
geocoder.getLocations(address, getFormattedAddress)
}
function getFormattedAddress(response){
console.log(response)
if (!response || response.Status.code != 200) {
alert("\"" + address + "\" not found");
} else {
//get itemised address
street = response.Placemark[0].AddressDetails.Country.AdministrativeArea.Locality.Thoroughfare.ThoroughfareName;
city = response.Placemark[0].AddressDetails.Country.AdministrativeArea.AdministrativeAreaName
locality = response.Placemark[0].AddressDetails.Country.AdministrativeArea.Locality.LocalityName;
postcode = response.Placemark[0].AddressDetails.Country.AdministrativeArea.Locality.PostalCode.PostalCodeNumber;
country = response.Placemark[0].AddressDetails.Country.CountryName;
alert(street + " " + locality + " " +postcode + " " +country + " "+city)
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address + '<br>' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}
}
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(39.1700149, -86.5148133), 13);
map.setMapType(G_NORMAL_MAP);
</script>
</body>
</html>
for v3 see http://code.google.com/apis/maps/documentation/javascript/services.html#GeocodingResponses
加载中,请稍侯......
精彩评论