HTML and CSS Reference
In-Depth Information
NOTE
Activating the GPS on a mobile device (which is what you are effectively requesting by turning on
enableHighAccuracy
) drains the battery, so be courteous to your users and use watches only when you
must update the position.
Drawing an Interactive Map
To draw an interactive map, you need to use the interactive Google Maps API. Previous versions required an
API key, but the current version, v3, doesn't require one. If you want to make money from the API or track your
usage, however, you must get one from
https://code.google.com/apis/console
.
The full Maps v3 API documentation is available on the Google website at
https://developers.google.com/
Although the API is extensive, it's well documented and you use only a small subset of the objects available:
Map
,
Marker
, and
LatLng
. The
Map
object represents the entire map. The
Marker
object is a marker that
you can drop on the page as you did in the static map. Use
LatLng
to store a single position.
To create a map, you need to create a new map object and pass it a DOM element to fill, and the three re-
quired options are the center, the initial zoom level, and the
mapTypeId
.
The center is a
LatLng
object, which you can create by passing in two floats to represent a latitude and
longitude. Zoom level is a number between 1 and 18 and controls how zoomed in the map is. Some areas don't
go up to 18. (This is usually rural areas in the United States and other parts of the world.) The
mapTypeId
object is one of four constants on the
google.maps.MapTypeId
class, each representing a different type of
map supported by Google Maps:
HYBRID
,
ROADMAP
,
SATELLITE
, and
TERRAIN
.
If you are still up for walking around, run the code in
Listing 23-4
to create an interactive map that can follow
you with a pin that updates itself as you move.
Listing 23-4:
An auto-updating interactive map
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Map</title>
<script src='js/jquery.min.js'></script>
<meta name="viewport" content="width=device-width, user-scalable=0,
minimum-scale=1.0, maximum-scale=1.0"/>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<style> body { padding:0px; margin:0px; } </style>
</head>
<body>
<script>
$(function() {
var map = null,
marker = null;
function createMap(latlng) {
