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