Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

008 Working with the Google Maps API

From: View Source

Video: 008 Working with the Google Maps API

Hello! This is Ray Villalobos and welcome to View Source! In this episode we'll add a map to your web site with Google's Maps API. So it's now time to View Source. Google has revolutionized the web by providing great services and also APIs, or Application Programming Interfaces that let regular people tie in to those great free services and helps them build their own apps. And one of my favorites is the Google Maps API, which lets anyone add a map on their web site. There're different versions of the Google Maps API that you can use for different purposes.

008 Working with the Google Maps API

Hello! This is Ray Villalobos and welcome to View Source! In this episode we'll add a map to your web site with Google's Maps API. So it's now time to View Source. Google has revolutionized the web by providing great services and also APIs, or Application Programming Interfaces that let regular people tie in to those great free services and helps them build their own apps. And one of my favorites is the Google Maps API, which lets anyone add a map on their web site. There're different versions of the Google Maps API that you can use for different purposes.

You can see there's a Maps JavaScript API, as well as a Maps API for Flash, Google Earth, and the one that we're going to use today is the Maps Image API, which just lets you put in a simple image with a map on any web site. So if we click on that you can see that there is a description for a lot of the things you can do with the API. The first thing you have to do is choose whether you want to work with the Street View or the regular API, and we're going to just work with the Static Maps API, which is right here. There you can see all of the different types of maps that you can build and the different options that you can put on your map.

So let's take a look at how you can do some of that. We'll switch over to this side; we have a simple HTML page. We'll go into our codesnippets and grab this first version of our map, and in our case, our map is just going to be an image tag, and the image tag is going to link to a special URL that tells Google a little bit of information about the map that you need. So I'm going to copy this, go into my index file and just paste it right here, and you can see that it brings up a map immediately. So we're passing a few options here to the standard maps.google.com URL, and the first one is the center or where we want the map to be centered at.

For that we just put in whatever we would normally type into Google Maps to get the map for this location, which is just the address, and what I do is separate the address with plus signs for the spaces, and then we can specify a zoom ratio. You can change this to make the map zoom in and out. So if I make it zoom to 1, you could see that it gives me a map of the entire world, and as those numbers get bigger and bigger, as long as I have my center correctly, you can see that it will zoom into the area that I want. So there we are at this particular location.

The next thing that you can enter is a specific size for the map. So you can type in some different parameters to make these maps bigger and smaller. There are some limits to how big you can make these maps and there's also a limit to the amount of requests that you can make for maps from the Google API. If you get to a certain amount of requests per month, then they're going to want you to open up an account, and it's going to cost you a little bit of money, but for most very small web sites, this is not going to be a problem. You can also choose to serve the map up in different formats. The default is PNG, and you probably want to leave it at that, but you can also ask for maps in GIF or JPEG formats.

Next, you can ask for different versions of the maps, and in this particular case, we've chosen the standard roadmap, but you can also type in satellite and receive a satellite version of the maps. You can also specify hybrid, which is a combination of the roadmap and the satellite, and finally, you can type in terrain for another version of the maps. Finally, we need to pass it along the sensor=false parameter, which will just tell Google that we're not using a device that has a built-in GPS sensor.

So this is a great map, but it doesn't exactly tell us where in the map we are located, although we know that it's the center, it would be really nice to have a marker that tells you where the location of our building actually is. So I'm going to go back into codesnippets and grab a slightly different version, and what we have added here is this markers section that just has an address of where we want the map to show our markers. So I'll grab this and copy it, go back in here, and replace our image tag, and you can see that now it gives us a different version of the map and we have a nice marker right on where the building is.

So to do that, you just simply add another keyword onto the URL and you type in the address again, separating with plus signs for the spaces. So that's pretty simple. Now, if I wanted to make this map clickable so that I could go to Google and check out the dynamic version of the map, then I would have to add an anchor tag, and that's what we've done with the next version of the map. So you can see the link to the map is a little bit different, the anchor tag actually takes you to google.com/maps and passes along a variable called q, with the address, again, using plus sign instead of spaces.

So we'll copy that, paste it, instead of this image tag right here, and the map looks exactly the same, but now the map becomes clickable and it takes you to the Google Maps page, where we can see this, and now we can use the full range of Google functions so that we can get an address and do different things with this map. Now, if you need a photo of your building on your web site, Google provides a slightly different version of the Google Maps API, that is the Street View API, and we saw a little hint of it before when we went to the Google Maps API page.

So this is a different application. We'll go into a slightly different URL, and we're passing along similar, but slightly different information here. We're passing along just a size and a location, and then plus some additional features. So I'm going to copy this, paste it onto my page. I'm not going to use a link right now, but you'll see that now we get a nice photo of the building and we can control how that photo is displayed by switching around some of these numbers right here. So the heading would be the direction where the camera is pointing to, so we could say change it to 150 and we see a different version of the map.

So this would be a degree rotation from 0 to 360 degrees, which would probably look the same, and anything in between will take us to a different rotation of the map. So there's the rotation that would take us to our building. You can control the zoom by typing in a different number right here. So there we are zoomed in a lot tighter than we were in the shot before, and we can zoom out just by typing in a larger number. Finally, the pitch is the vertical angle, obviously starting from 0, but we can have the photo tilt up, a little bit more, so that we can angle into different parts.

So if this is a taller building and we wanted to maybe show a different floor, you might type the pitch and show a higher angle of the building. So combining those different features, like field of view, pitch, and heading, you can use Google's Street pictures to get a picture of any building that you want. So as you can see, adding a map onto your web page is super simple. You can even use the Street View to find a picture of your location and add it automatically to your pages. So see you next time. Now, remember that to find a place in your world, sometimes all you have to do is View Source.

Show transcript

This video is part of

Image for View Source
View Source

20 video lessons · 15876 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed View Source.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.