HTML and CSS Reference
In-Depth Information
Figure 8-3. Determining latitude and longitude based on a human-friendly address
To begin, include 1.6.4 and the Google Maps JavaScript API V3 in the web page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js">
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
The HTML5 Geolocation API can only return the user's location in coordinates, so let
the user enter his address via an input text field:
<div>
<label for="address">Enter an Address:</label>
<input type="text" id="address" />
</div>
<div>
<input type="button" id="go" value="Click Me To Find Latitude And Longitude"/>
</div>
The JavaScript below handles the button click, reading the input from the user, and
calls the Google API to geocode the address:
$(document).ready(function () {
// wire up button click
$('#go').click(function () {
// get the address the user entered
var address = $('#address').val();
if (address) {
// use Google Maps API to geocode the address
// set up the Geocoder object
var geocoder = new google.maps.Geocoder();
// return the coordinates
