Introduction to the Google Maps API

By | January 22, 2020

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 Thank you very much.

10 thoughts on “Introduction to the Google Maps API

  1. Muhammad Nurcahyo Pratomo Post author

    Inside 2018 google map having upgrade so can't localhost so sad..say google developer for teach us how to build api key gmap for localhost (I mean not live domain or ip anything). Many developer confused because of you google honey lol

  2. Rich Hackett` Post author

    is there a way to find locations of parking lots by using the Google Maps API? Also, how would I find parking lots that are not listed as parking lots on Google Maps too?

  3. Venu UI Training Online Post author

    Great video. Can we able create car pool app with this google maps with angular and node js?.

  4. Mohamed Safeeq.s Post author

    Bro i completed up to account setup and i got my api, why should we need to write html program, and why gmp pay for us, tell me the advantages of google map platform and its disadvantages, whether it will be helpful for college students

  5. Joze Jerse Post author

    google is not defined
    tutorial link broken
    why is this even uploaded anymore?

  6. SERHAT B AKCA Post author

    Hi thank you for this. Can we get full residential/commercial addresses on user location so they can select their address, rather than typing their home/business address?


Leave a Reply

Your email address will not be published. Required fields are marked *