HTML and CSS Reference
In-Depth Information
Plotting a Location on a Map
The latitude and longitude don't tell you a whole lot, so one of the first things you must do is plot the location
on a map. To do this you need access to a map API. Google Maps is one of the most popular map APIs and
provides two different APIs: a static map API and the traditional interactive map you are probably familiar with.
Generating static maps is easy. All it involves is sending a properly formed request in the form of an
If you want a map with a marker at a specific location, you need to generate a URL with the size of the output
image, the marker, and a value for the sensor option, which lets Google know whether this application uses a
sensor to determine the position. (This field is required.) You also need to pass a zoom value to control how
zoomed in the resultant image is.
Markers are defined by a number of attributes separated by pipe characters (
|
), for example:
markers=color:red||label:A|lat,long
Because this needs to be encoded into a URL, the pipe character is URL encoded into the string
%7C
.
Listing 23-2
shows the first example modified to output a static map at your location. Desktop browsers have
wildly varying levels of accuracy, so it may show a location that's only a rough approximation of your actual
location.
Listing 23-2:
Static map
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grabbing the position</title>
<script src='js/jquery.min.js'></script>
</head>
<body>
<script>
function logPosition(position) {
var url = "http://maps.googleapis.com/maps/api/staticmap?" +
"zoom=13&size=320x420&" +
"markers=color:blue%7Clabel:S%7C" +
position.coords.latitude + "," +
position.coords.longitude + "&sensor=true";
$("<img>").attr("src",url)
.appendTo("body");
}
function positionError(error) {
console.log(error);
}
navigator.geolocation.getCurrentPosition(logPosition,positionError,{
enableHighAccuracy: true
});
</script>
