Start learning with our library of video tutorials taught by experts. Get started
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.
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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.