Adding a Google Map to your website

Introduction

Adding a Google Map to your web page is very easy, once you've been shown
how! That's what we're going to do in this lesson - we'll go over each step
of creating a basic Google Map using the JavaScript API.

From there, it's only a matter of tweaking some of the options to customize
the map to your liking; you can go even further by reading more of the
Maps API tutorials, or by reading the
Developer's Guide.

A web browser. We Google Chrome, but there are many web
browsers available for various platforms: Firefox, Safari, and
Internet Explorer are some of the best-known options.

Try it out

The basic HTML page

Because everything on the web is made up of HTML, we'll start there. The
following code creates the simplest of web pages:

<!DOCTYPE html>
<html>
<head></head>
<body>
</body>
</html>

None of this is specific to Google Maps - it's the basis for any HTML page.
Open your text editor and add this code, then save the file to your desktop as
google-maps.html (or any other filename that ends with .html).

Your Google Map requires a page element in which to appear; add a div tag to
the body with an id attribute of map-canvas. This creates a container that
we'll reference later in the lesson.

Set the width and height of the div element using CSS. By default, a div
has a height of 0, meaning that any map you place inside it won't be visible.
Use a style tag in the head to set the map to any size; in this case 500
pixels wide and 400 pixels high.

Load the HTML file in a web browser by dragging it from your desktop into the
address bar of your browser. You'll notice that nothing is displayed - there's
nothing in the div yet. If you'd like to see the div on your page, add a
background-color CSS declaration to your existing <style> tag:

Create and configure the map

The final piece of code is the JavaScript that creates the map. The code
contains a function to run once the page has loaded. In this example,
and all of the examples in the Maps API documentation, this function is named
initialize.

<script>
function initialize() {}
</script>

Add this code immediately after the <script> tag you created in the last
step.

The google.maps.Map object

The first thing the initialize function needs to do is create a new Google
Maps object:

var map = new google.maps.Map();

The Map object constructor takes two arguments:

A reference to the div that the map will be loaded into. We use the
JavaScript getElementById function to obtain this.

center is a Google Maps LatLng object that tells the the API where to
center the map.

zoom is a number between 0 (farthest) and 22 that sets the zoom level
of the map.

mapTypeId is used to specify what type of map to use. Your choices are
ROADMAP, SATELLITE, HYBRID, or TERRAIN.

Executing the JavaScript function

Add an event listener to the window object that will call the initialize
function once the page has loaded. Calling initialize before the page has
finished loading will cause problems, since the div it's looking for may not
have been created yet; this function waits until the HTML elements on the page
have been created before calling initialize.