Introduction to the Google Maps API

Hi.
Welcome to the introduction to the Google Maps API tutorial.
My name is Mano Marks.
I'm a Developer Advocate on the Google Maps team.
In this tutorial, I will teach you the basics of using the
Google Maps API in your web applications.
To fully take advantage of the content in this presentation,
you should have a basic understanding of JavaScript
and HTML and access to a text editor.
In this tutorial, you'll be constructing a map that has
these basic features--
a basic map, a map marker, which when clicked, has an
InfoWindow pop-up, an auto complete form, and current
weather forecasts.
We've set up a site to walk you through
each of these steps.
Go to this URL for the tutorial.

OK.
So you see this URL, click on Your first map.
You'll see there's some instructions on the left, and
some code on the right.
Click on the HTML tag on the right, here.
And you'll see that we have a script tag
with a source attribute.
This script tag loads the Google Maps
API JavaScript loader.
You'll see that the loader adds a sensor parameter, which
in turn takes a value of true or false.
Now one of the most common Maps API mistakes is to not
set this parameter correctly.
Developers often leave it off or leave it with the value
true or false, which is one, big, string value, which is in
some of the documentation.
Unless your application is getting location information
from your device, say a GPS on a phone or HTML5 geolocation
from your browser, use false.
Otherwise, use true.
Once it's set, you don't have to worry about it.
It doesn't impact your
application one way or another.
It's a tracking mechanism for us.
Next you see that there's a development
with the idea of map.
This is where our JavaScript will place the
map, once it's loaded.

OK.
Let's add in a basic map.
Click over to the JavaScript tab.
It has all the code that you need.
First create an options object, in
this case, map options.

You have to select at least three options--
zoom, center, and the map type.
Your basic map type options are
roadmap, terrain, or satellite.
Then create a new Google Maps map object and pass the map
div and the options object.
There, you should have a map right?
Actually, if you click Run, you'll see
that nothing happens.
This brings us to the second most common mistake in Maps
API applications--
failure to properly set the CSS for your page.
Click on the CSS tab, and remove the slashes before the
line that says pound map.

Then hit Run again.
You'll see that it now works.
And we have this nice map.
OK.
So now click the Next button on the tutorial.

All right.
So now let's add a marker to the map.
Map marker is a familiar sight on maps.
You've probably seen this red marker on many websites.
To add a basic marker, add a few lines of code after you've
created the map.
First, create another options object, in this
case, marker options.

And add a position option that uses the Google
Maps LatLong object.
This should create a lat/long object, which we used in the
first bit of code for the center of the map.
This is a basic building block of the Maps API.
Each lat/long object has a latitude
and longitude property.
Next you create a marker object.
Finally, add it to the map by running set map.
And then you click Run.
You should see the map now has a marker on it.
Let's move on to the next section.
Here we're going to create a InfoWindow and attach it to
the marker.
An InfoWindow is an overlay, like the marker object.
It is used to display information in
plain text or HTML.
Going to modify your code a bit here.
Create another options object.
So here you see InfoWindow options.
And you're giving it a content property, which you are going
to assign some basic text.
Next create the InfoWindow object.

Finally, we're going to add an event listener, which will
cause the InfoWindow to open when you click on the map.
To do this, just use Google.maps.event.addlistener,
pass in the objects to be listened to, in this case, the
marker, the type of event, in this case, a click, and a
function, which executes when the event is triggered.
In this case, the InfoWindow opens on the
marker in the map.

OK.
Now click Run.
You should see a map that looks like this.
And when you click on the marker, the InfoWindow opens.
Click on the Next button to move to the next section.
Now we're going to add in AutoComplete to your map.
AutoComplete is part of the Places Library of the Google
Maps API, which lets you take advantage of Google's data
store of tens of millions of places around the world.
A place is anything from an address to a landmark, a
restaurant, a place of worship, or
a government building.
We have, in fact, over 125 different
categories of places.
AutoComplete lets you put one input box on your page, and
users can type in their requests.
In real time, as they are typing, Google will then try
to match their requests.
Let's take a look at the code.
First thing we'd need to change is the HTML.
We need to add in an input element with type text and an
ID, in this case, AutoComplete.
Click on the HTML tab to see this.
Notice, too, that we added in a libraries parameter to the
JavaScript loader.
This one is libraries equals places.
Google Maps API libraries are integrated libraries with the
Maps API code, but they are loaded separately and only
when needed.
OK.
Click on back over to the JavaScript tab.
You're going to create an options object.
In this case, we're just going to limit the type of responses
to establishments.
So here we have AC options.
And then you see types, establishments.

Establishments are not geocodeable addresses, but
they're basically places of business.
So cafes, restaurants, whatever, shopping malls.
Next you create the AutoComplete object itself.
And pass in the AutoComplete elements.
And then we bind that AutoComplete
object to the map.
That means it will just show results that are within the
current bounds of the map.
Finally, we're going to create a listener, an event listener,
on the AutoComplete object.
And this basically just listens for
changes in the selection.
It then places a marker on the map and opens an InfoWindow
with the name of the place.
All right.
So now click Run.
And you'll see here that there is a map, and as I type in SF,
you'll see San Francisco-related places
showing up.
So I'm going to click one.
And clicking in SFO, which is the airport, and you'll see it
opens up, a pop-up with the name.
All right.
Let's click over to the next section.
And lastly, we're going to add a weather layer to your
application.
There's a number of different layer types available to you
in the Google Maps API, including Panoramio, KML
layers, traffic, bicycling, and more.
Most of them take only a few lines of code to add to a map.
So first off, we just create the weather layer object and
pass it a new options object.
In this case, we're setting the temperature unit type to
Fahrenheit.
This is North America, but you can also do Celsius.
Then we are going to set the weather layer to the map,
weatherlayer.setmap.

Then we are going to finally create a cloud layer and set
that on the map.
You click Run, and you'll see that you have basic weather
showing up.
And if I clicked on one, I'll get a forecast for that
particular point.
You don't see any clouds, because currently it's not
cloudy in San Francisco.
So I'm going to just zoom out, and then you see there are
actually clouds there.
So this weather layer produces weather that is--
forecasts that are available up to 15 minutes ago, and then
clouds that are within the last three hours.
So now you have up and running basic Google Maps API
applications.
And you're good to go.
If you want any more information on the Google Maps
API, check out the documentation on
developers.google.com/maps.
Thank you very much.