One of the most common things that JavaScript programmers need to do with geolocation data is to display a location on a map. In order to do this, you first need to get the latitude and longitude. You’ve got that now. But, how do you draw the map and figure out where on the map that latitude and longitude are? That, it seems, is the daunting task.
Fortunately, there are people who have done this before and who have created an API for interacting with their mapping software. Most famously, Google makes their mapping software available for free to anyone through the Google Maps API (even for commercial purposes, in most cases).
To use the Google Maps API, follow these steps:
Go to the Google APIs console at http://code.google.com/apis/console and log in with your Google Account.
After you log in, you may be asked to agree to the terms of use; if so, click Accept.
Click the button labeled Enable an API.
Your screen now displays a list of APIs and a Browse APIs search box.
In the Browse APIs search box, type Google Maps JavaScript API v3.
The link for this API appears.
Click the button that says OFF under the status heading.
This step turns the API ON.
After you activate the Google Maps JavaScript API, a green ON appears next to the API.
Activating the Google Maps API.Click the Credentials link on the left navigation bar.
You see the API Access Screen.
Click the link labeled Create New Key.
The Create a New Key dialog box appears.
Click Browser key in the Create New Key dialog box.
A dialog box containing a text input field labeled Accept requests from these HTTP Referrers opens.
Leave the input box labeled Accept requests from these HTTP referrers blank and click Create.
The dialog box closes, and your API key will be created.
In the Public API access section, you now find a long string of letters and numbers inside a box labeled Key for browser applications. This is your API key.
The API key is all you need to gain access to all the great functionality of the Google Maps API.
Now that you have access to the Google Maps JavaScript API, it’s time to try it out. The web page in this example gets the location of your computer using the navigator.geolocation object and then passes it to Google Maps to get a map.
<!DOCTYPE html>
<html>
<head>
<title>Mapping your location</title>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YO<br/>UR_API_KEY">
</script>
<script>
// run the initialize function after the map loads
google.maps.event.addDomListener(window, ‘load’, initialize);
function initialize() {
// get the Position object and send it to a callback function
var gps = navigator.geolocation.getCurrentPosition(
// the callback function
function (position) {
//set Google Map options, using latitude and longitude from position object
var mapOptions = {
center: { lat: position.coords.latitude, lng: position.coords.longitude},
zoom: 8
};
// make the map and load it into the map-canvas div in the <body>
var map = new google.maps.Map(document.getElementById(‘map-canvas’),
mapOptions);
}
);
};
</script>
</head>
<body>
<div id="map-canvas"</div>
</body>
</html>
In order for this script to run correctly, you have to replace the text YOUR_API_KEY with the API key that you obtained from Google.
Check out the results of running this code in a browser.
