Hi everyone. I have to create a form that accepts as its relevant parameter the name of an Italian city. Once submitted, the form value should be sent to the Google Maps service which should in turn return a complete map showing the location of that city. I'm pretty a newbie with Google Maps, so I don't know exactly how this could be done. I've already an API key and all the relevant Google's documentation but, gee, I didn't find a good tutorial that clearly explains all the steps required to make it work. I know that somewhere there must be a conversion to geocodes (latitude and longitude, I guess), but I don't really know much about that. Thanks to everyone who'll take the time to answer my question.
A:
The best documentation is on the Google website here: http://code.google.com/apis/maps/index.html
There is specific examples on the Google site here: http://code.google.com/apis/maps/documentation/javascript/examples/index.html
And the working Geocoding example is here (use View Source to see the implementation): http://code.google.com/apis/maps/documentation/javascript/examples/geocoding-simple.html
If you are using the JavaScript API, I recommend you use Version 3 which does not require an API key.
mistrmark
2010-10-22 16:04:15
A:
First of all, I would suggest using the v3 API instead of the v2 API, as the latter has been deprecated in favour of the new version. The v3 API does not require an API key.
Then what you describe is very easy. You can use the Geocoding Services provided by the Google Maps JavaScript API. There is no need to use the Server-side Geocoding Services, as this can be done entirely on the client-side in JavaScript. Consider the following example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Geocoding Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<input type="text" id="search">
<input type="button" onclick="geocode();" value="Search">
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: new google.maps.LatLng(42.49, 18.46),
zoom: 6
});
var geocoder = new google.maps.Geocoder();
function geocode () {
geocoder.geocode({
'address': document.getElementById('search').value
},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
map.setCenter(results[0].geometry.location);
}
});
}
</script>
</body>
</html>
Screenshot:
Daniel Vassallo
2010-10-22 16:08:12