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 .
The full Maps v3 API documentation is available on the Google website at
maps/documentation/javascript/reference .
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
<html lang="en">
<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"
<style> body { padding:0px; margin:0px; } </style>
$(function() {
var map = null,
marker = null;
function createMap(latlng) {
Search WWH ::

Custom Search