1.2 Google Map Embeds

Hello everyone, I am Reggie Dawson. Welcome to the Use the Google Map API course for Tuts+. In this video, we will look at the most basic form of the Google Map API that you can use. This doesn't even require you to write a line of code. The only thing you need is an API key to use the Google Map Embed API. The first thing you need to do before we can use any of the Google Map APIs is to generate an API Key. Now we can always just go to an existing map and get an embed code and use it on our site, but this way we can generate custom maps for any purpose that we want. Now in order to generate an API Key, navigate to the Google Developer's Console. Now you will have access to this as long as you have a Google account. First, you may have to create a project. Once you have that, go to the library and choose the API that you need to use. Now in order to enable the embed API, we click on it and then choose Enable up here. After that go to Credentials, and create Credentials, and then choose API key. Now, after that save the key that is generated as we will need it to use within our embed. Once we have that, we can create an embed using a standard iframe. Create a project folder, and then inside of that create a file name index.html. The first we do in the iframe is set the height, width, frame border, and style. Then we have the Google Maps URL that makes up our request. We will break down how this URL is constructed so that you will understand how to create your own map embeds. First we have the Google Map URL followed by the mode, which in this instance is set to place. Google Map embeds can be a place, direction, search, view, or street view. The place mode allows you to search for a specific place and display a pin for it on a map. After that, we have our API key which we generated with the developers console. Make sure to paste your API key here. Following that, we have any other parameters and in this case, the place mode has the q parameter which is required. This represents the place that we're searching for. In the example, I used Times Square. But you can search on a name, place, or address, as long as your URL escape is string. How do you do that? Well you see the plus signs in between the Times Square? That represents a space. This way, all we need to do to enter an address is to separate each component of the address with the plus sign. For example, here we have the address of the Empire State Building as the basis of our embed map. Now go ahead and save this. And then when we preview, as expected we see a pin on the top of the address that we entered. Now the other optional parameters that we have available to us have to do with how you can save this place to your Google Maps. We can add an attribution source, as well as linking the place with the URL of our choosing. Now the next kinda embed we can create is a directions mode embed. This allows us to map the distance between two or more points on the map, as well as the travel time required. Now here, we have a similar iframe to the first embed we set up. This time, however, we have the mode set to directions. Then we have the first of the required parameters when using the directions embed origin. This specifies the starting point for our directions. We specified this the same way we did with our queue by escaping the spaces with the plus sign. Here we are starting from Miami, Florida. Then we have the other required parameter, which is the destination, or where we will end up if we follow the directions. It makes sense that these parameters are required because without either one, we don't have a need for directions. Then we have an optional parameter of wait points. This allows us to add intermediate places to map our route through. We can use up to 20 wait points if we separate them with the pipe character. In this situation, we will route our map through Atlanta, Charlotte, and Baltimore. Then we set the direction to avoid tolls and highways with the avoid parameter. This will not remove routes that feature these things, it will just favor routes without these features. There are also a few other parameters that you can check out in the documentation if you like. Now go ahead and save your file and preview. Now if you look at the map that it generated we will see a route that has way points to the locations that we specified. Furthermore, if we click on the More Options button we can get driving directions. Now this may seem very simple to you, but something like this could be very useful. Now the next mode we can use is the search mode. This has a parameter of just like the places mode. But instead of a place, it searches across the visible map region. The recommended search should be a location based search term. As you can see in this case I'm searching for restaurants in Boston. If we save and preview the map we should see a collection of restaurants around the Boston area. We could use this kind of embed if we had some sort of site or project that catered to a specific audience. We could use this map to display targeted places that would be of interest to that audience. Next we have the view mode which returns the map with no markers or directions centered over the location that you specified. Now the only required parameter is the center parameter which takes a latitude and longitude separated by a comma. Incidentally center is also optional parameter that can be use with all of the other modes. So our zoom in map type which we used here. We can use zoom to set the initial zoom level of the map with 0 being zoomed out to see the entire world and 21 allowing you to see individual buildings. Map type allows you to specify between road map which is the default or satellite map which is what we use here. We also have optional parameters for the language which lets you specify the language of UI elements and region which display the correct borders. Now, if we save and we look at this generated map, we will see a satellite view of Statue of Liberty. Now the last mode that we can use with the embed is the street view mode. All we would do is change the center to location. The street view takes one of two required parameters, either location or panel. Location is specified the same as center and latitude and longitude. Pan now allows you to specify a panorama ID as the location of the street view. We also have a few other optional parameters. The first is heading, which indicates the compass heading of the street view camera. Pitch handles the up and down angle orientation of the camera. FOV deals with the field of view. But at this case, it operates as the zoom level of the street view. All of these settings let me alter the view from the same location, the Statue of Liberty. In this case, we have swiveled around the camera so that we are looking out at the water. One last thing to notice, that if you are not able to get the street view embed to work, make sure to enable the street view API in your developer console. Now these are very basic examples, but show the powerful ways that you can use Google Map embeds in your projects. In the next video, we will learn how to use JavaScript to create our maps.