Google Maps API 3

CHAPTER 10 ■ LOCATION, LOCATION, LOCATION
margin-bottom: 10px;
}
#map {
width: 500px;
height: 300px;
border: 1px solid black;
}
The Starting JavaScript
With the HTML and CSS in place, you get to the interesting part, the JavaScript code (Listing 10-3). You
start by laying a foundation. This code will create a regular map centered over the United States.
Listing 10-3. The Starting JavaScript for Example 10-1
(function() {
// Defining some global variables
var map, geocoder, marker, infowindow;
window.onload = function() {
}
// Creating a new map
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// Code for catching the form submit event goes here
// Function stub
function getCoordinates() {
}
})();
Notice that you define some variables at the top of the code. They are defined there since you need
to have access to them from a function that you will create later.
Now that you have the foundation laid out, it’s time to start building the functionality for finding
the position of an address.
Setting Up the Event Handler
The first thing you will do is to set up the event handler for the form. You do this by catching the form’s
submit event. On submit, you take the address from the text input and use it as a parameter for the
function getCoordinates() that you’re going to create in a minute.
214