Please note that since this tutorial was created Google has changed the terms of use of the Maps API. In order to obtain an API key you will need to sign up for a billing account, which involves submitting a credit card number. However, once you have signed up for billing, Google provides $200 per month of "free" usage of the Maps services, which should be more than adequate for any educational use.

Start a new project with HTML5 Initializr

Download the template files to rapidly kickstart the project

Get Files »

Get the GMaps JS library

Use the GMaps library to make it much easier to work with the Google Maps API

Get Libraray »

Grab Maps API Key

You will need a Google Maps API Key to authenticate your requests.

Get Key »

Get the city data

You can find capital city data in JSON format here.

Get Data »

Grab a Weather API Key

You will need a Open Weather API Key to look up the current weather.

Get Key »