Introduction to the Google Maps API

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.

81 COMMENTS

    You fucking dumbass. I don't even have a mac. I just hate fucked up fanboys like you. Grow up. Just look at you. Pathetic…

    Thanks a lot for your pro tutorial.
    I wonder if it's possible to automaticly includ on my map all my places which I already imported using google places panel.
    I have my local listing completed and need to find most optimal way to show it on a map.
    Can you advice something?
    Thanks.
    Marek

    Hi +eprepress, the Google Maps API doesn't have access to the cookie created on Google, it's a privacy thing, that does sound like a good use case though.

    Will this work if i copy the contents of the html , js and css tabs and place them in a folder as 3 separate files ?

    Did he say "Unless your device is getting GPS information use False, otherwise use True?" for the Sensor attribute? Or is it the other way around?

    Please help, the tutorial isnt working – there is no code displayed on the right side and I also can't type in it either. Do I need to use Chrome or something?

    This is a great tutorial. I thank you for putting this together. I was curious though, I am noticing this doesn't need to use an API key or using Ajax calls.

    Are there any tut videos that show how to put together a google maps within an iPad application that pulls data using an API key and Ajax calls?

    I have already created my API key and turned on the google maps v3 in the API console. I am having difficulty building it using the ajax parameters.

    A tut video would be great!

    Great tutorial Mano! Can I use this basic map setup to incorporate my own inputted addressed and also incorporate geocoding?

    At the 5:26 you said that the Autocomplete use the Places Library Google Maps API and let us to use Google Data Source of ten of millon of places arround the world. So, can we use our own JSON Data Source to limit our search? Have a code example?

    Is there anyway to keep the geocoding and info window feature without using the auto-complete option? I'm having issues getting rid of the auto-complete code and still having the map work

    I have a map with multiple markers. I need a zoom to be given when the user clicks on the marker. In addition to the zoom, an information window is also open. 
    I want this to happen only when the user clicks on the marker. Do you help me?

    Sir,
    I want to use the users geocode and show them the nearest stores to them within some radius and show them direction to the store they choose.
    How can i do this? 
    Please Help me..!!

    Thanks Mano!! Great tutorial, short and sweet and to the point with no fluff, great examples, excellent presentation.

    If you can't get it to work, try including jquery in your html:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    whats the best way to update my location on my website. I drive a food truck and I would like a easy way to update my location while on the road

    To make the map show, change CSS

    FROM:

    #map{
    height: 100%;
    margin: 0;
    }

    TO

    #map{
    height: 300px;
    margin: 0;
    }

    Can't get accents displayed correctly from kml files displayed with google maps API… I added encoding="UTF-8" to the <kml> tag, or to an <?xml … encoding="UTF-8"?> tag before the kml tag … files are saved/encoded in utf-8, web page is also declared and saved as utf-8 !

    No way to display accents correctly with google maps api ?

    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

    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?

    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

Leave a Reply

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