X

Javascript APIs, Pt 2

Google Maps API

The Google Map Javascript API is not only a practical API, but one that gives you access to one of the most powerful (and politically dangerous) mapping technologies available to the public.

The Maps API consists of a function initMap(){} which begins with an new instance of a google.maps.Map() (this function defines the position, zoom level, map type, etc). In this example we also utilize the HTML5 geolocation method navigator.geolocation to determine the user’s location (this requires the user’s consent).

Setting up your API Key

Set up your API Key following these instructions. Google Maps asks to set up billing, but the Map API is free.

generate Project
go to your console, make sure you’re in the right project
select “Maps Javascript API”
click “enable”
navigate to “Credentials”
generate API Key, click close
copy API Key into your code

The Map

A basic map template can be found here.

Styling

Documentation on styling your map can be found here.
A complete reference of values for featureType, elementType and stylers can be found here. Notice that these adopt a JSON-style syntax.

Controls

For custom controls (and limiting interfaces), you can view documentation here.

Boilerplate Files

Your boilerplate file can be downloaded here.

Working Files

Working files will be added to the site after class.