Initializing the map

Getting a zoomable and panable interactive Google map up and running takes a ludicrously small amount of code. In this task we'll add that code, as well as set up some of the variables that we'll use later in the script.

Prepare for Lift Off

In this task we'll initialize the variables needed to configure the map and make a call to the Google Maps API. We should start by adding the standard jQuery wrapper to the empty google-map.js file that we created earlier:

$(function () {
    //all other code in here...
});

Remember, the $(function () { … }); construct is a shortcut for jQuery's document.ready event handler.

Engage Thrusters

Within the wrapper we just added, we should add the following code:

var api = google.maps,
    mapCenter = new api.LatLng(50.91710, -1.40419), 
    mapOptions = {
        zoom: 13,
        center: mapCenter,
        mapTypeId: api.MapTypeId.ROADMAP,
        disableDefaultUI: true
    },
    map = new api.Map(document.getElementById("map"), mapOptions...