Professional HTML5 Mobile Game Development

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/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 required 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 ...