New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

View Source
Illustration by

008 Working with the Google Maps API


From:

View Source

with Ray Villalobos

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
View Source
2h 10m Intermediate Jan 20, 2012 Updated May 25, 2012

Viewers: in countries Watching now:

The View Source weekly series offers 10-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique. Example projects include creating datepickers and custom photo galleries, and mapping and geotagging with Google Maps.

Topics include:
  • Creating a custom URL in WordPress
  • Adding breadcrumb links to sites
  • Creating a toggle button with jQuery
  • Adding Twitter feeds to a site
  • Adding PayPal buttons to pages
  • Uploading photos to your web site
  • Embedding videos for different browsers and devices
  • Parsing and placing a YouTube video feed
Subjects:
Web Web Design Projects
Software:
WordPress
Author:
Ray Villalobos

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.

There are currently no FAQs about View Source.

 
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.
Upgrade now


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.

join now Upgrade now

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

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.