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
<img> tag src to Google, which returns an image to you. The API for static maps is available at ht-
tps:// .
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:
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
Listing 23-2: Static map
<html lang="en">
<meta charset="UTF-8">
<title>Grabbing the position</title>
<script src='js/jquery.min.js'></script>
function logPosition(position) {
var url = "" +
"zoom=13&size=320x420&" +
"markers=color:blue%7Clabel:S%7C" +
position.coords.latitude + "," +
position.coords.longitude + "&sensor=true";
function positionError(error) {
enableHighAccuracy: true
Search WWH ::

Custom Search