Creating Your First Google Map

JavaScript needed for Maps

JavaScript is a programming language that is built into all major browsers. Because JavaScript is required to use Google Maps on your page, we would like to explain a few things about it before diving in and creating your first map.

JavaScript, when used within HTML pages, can be inserted directly into various <html> tags, but for the purpose of drawing Google Maps, we are only concerned with two of these tags:

the <script> tag and
the <body> tag.

The <script> tag allows you to insert predefined scripts (or, intrepreted programs) into your page. Google Maps require a few scripts in order to operate. You can see these scripts below, the first which loads a special JavaScript file from Google's servers that contains code critical to the operation of the maps, and the second, one that you provide, that tells the browser how to load and display your map.

Maps Version 3 is Better

This script is smaller and easier to include than it was in version 2 of the API, due to the fact that an API key is no longer required. The big, continuing advantage is that if you create websites for clients, you can use the same basic code over and over again without concern for a key. It also means that you no longer have to keep a record of all the API keys for your clients. Less work is most definitely a good thing, right?

A New Map Parameter in Version 3 (v3)

A new parameter is required. This parameter's name is "sensor". The value placed in sensor (either "true" or "false", without the quotes) indicates to Google's mapping engine whether or not to use a device's internal location mechanism, e.g. the GPS sensor in an iPhone. You can see that we've set its value to 'false' because we'll be telling the map which coordinates to use. If we had an application intended to run on a mobile device with a location sensor, and the map was to show the current position, then we would set it to 'true'.

The Map Script from Google

    			<script

				    src='http://maps.google.com/maps/api/js?sensor=false' 

      			    type='text/javascript'>

				</script>

Make sure that you enter (or copy) the code exactly and place it within the <head> tag. If there are any differences between what we show here and what you enter then the map will not be displayed. And don't forget to set the sensor to "true" or "false", or you'll receive an error from Google when loading your page.

The Other JavaScript Script

<script type='text/javascript'
function initialize() {
  var latlng = new google.maps.LatLng(37.775196, -122.419204);
  var myOptions = {
    zoom: 11,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
       
var map = new google.maps.Map(document.getElementById("map_canvas"), 
              myOptions);
}
</script>

Don't worry about what all this code means for now. But take notice of the "google.maps.LatLng(37.775196, -122.419204)". The number 37.775196 represents the latitude of the map center, and the -122.419204 represents the longitude of the map center. This particular latitude and longitude is the location of San Francisco, California. The "11" is telling Google Maps to zoom the map to level 11. For more information, zoom levels are explained below.

Where to Place the Map

You'll notice in the last JavaScript function the item "getElementById('map_canvas')". The name "map_canvas" in this code is a reference to a <div> that you need to insert somewhere within the <body> section of your page. It would look something like this:

This means, "Hey Google, this is the place to draw the map, and please make it 450 pixels wide and 250 pixels high. NOTE: you can use any numbers for "height" and "width" in your code. If you want to have a map this is 800 pixels wide and 400 pixels high, then you would use ""width: 800px; height: 400px;" instead of "width: 450px; height: 250px;". The map will then take on this new size.

There's only one more thing you need to do before your map will display. You need to slightly modify the <body> tag to tell the browser to load the map when the page is loaded. You'll actually be calling the function you wrote above, called "initialize()" (this function can have another name if you wish). Another advantage of v3 is that you no longer have to call the 'unload' function when the page is closed.

Google Maps Zoom Level

Google Maps can have controls (the sliders you see sometimes on a map) that allow you to zoom in and out. The slider is really just passing a value from 0 through 21 to the map function. The zoom level of "11" we used for this example is about right for a small to medium size city view, "21" is the maximum zoom level, which is the street level, and "0" is the minimum zoom level, which shows the entire world. You should play around with the zoom level on your own page to get a feeling about how this works.

Now, let's look at how the map looks if we put all this together:

The Resulting Google Map

We used a latitude and longitude that we had obtained previously to show a map of San Francisco, next you'll see how to obtain the coordinates of the location you're interested in.