2.4 Creating a Directions Map

Hello everyone, I am Reggie Dawson. Welcome to the use the Google Map API course with Tuts+. In this video, we will use the direction service with the JavaScript API to create a small app that will allow us to search for transit solutions from one area to the next. First, we need to make sure that the Directions API is enabled in our Google's developers console. Now, in order to use the Directions service with the Google Map API, we need to create a DirectionsService object. Then we use the DirectionsService route to initiate a request. That request is then displayed by the Directions renderer. Let's create a project so you will understand this better. Create a folder to hold the project, then create a file called index.html. First, we add our standard HTML tags. We also have some inline styles. First we have some styles for our body, and a style for our map setting it to 100% height. Then we have some styles for a floating panel that will sit on top of the map. Then we add our floating panel div. Inside, we have text inputs for the start and end points for our directions. As we know, directions in our embed required the start and end point. The same hold true for directions when using the JavaScript API. Then we also have a button to initiate our search. Then we add the div to hold our map as well as the script reference for app.js and the Google Map API. Of course, you will need to add your API key to the Google Map script. After that, you can create app.js. The first thing we'll add to this file are variables for directionsService and directionsDisplay. Then we add our initMap function. The first thing we do is set the directionsService and the directionsDisplay. The directionsService is used to provide the Directions data. Later on in this file, we will use the DirectionsService route method to initiate the request. After that, we will use the DirectionsRenderer to display the directions on our map. We will look at this process more in a moment. Here we create our map like we have done in previous videos. We, of course, set our map to the div that we have in our index.html page. Now, this is an important step. We have created our DirectionsRenderer object already but here we bind it to our map. Now, any directions we pass to our map will be rendered accordingly. Then we set the search button to the search variable. After that, we assign a quick handler that will execute the findRoute function. And then we add the findRoute function. This is how we get the information we need back from the directionsService. Here we have the only required options of origin, destination, and travelMode. Origin and destination can be in the form of latitude and longitude or a string. TravelMode specifies the preferred mode of travel for the request. If you look at the documentation for the Directions API, you can see the options for the travel mode. The options are driving, bicycling, transit, or walking. If we look on this page, we can see some of the other choices we have when setting up our Directions request. Transit and driving options are additional choices we have when using those travel modes. Unit system is how you measure distances, and waypoints allows us to specify waypoints. Now, if you want to know about all of the options that are available to you, be sure to check out the documentation. Now, transitOptions is set up in our app as well. This map will check the train routes between two points. As a result, I have the travelMode set to TRANSIT. In my transitOptions, I have the mode set to RAIL, which will search for any rail-based transit. I could have also added further modes such as BUS, if I liked, by adding it to the array. Again, if you check out the documentation, you could see the other options you have with the transit options. There is also a similar driver options you can check out as well. Then we add our function to handle the response from the directionsService. If the status returned is OK, then we will use the DirectionsRenderer that we bound to our map. The setDirections method will apply the directions returned to the map. If the status message is not OK, then we will alert the user with the error message. After that, save all your files and preview the project. Once it comes up, I will choose two locations. Once we choose our locations and search, the map is centered on the search. If we click on the start point, we can see some information for the transit option. This includes transit times as well as who runs the service. We could've also added departure dates and times to give even more accurate information. Again, this has been a basic example, but it show the different things that you can do with the Google Maps API if you have a little imagination. In the next video, we will learn how to draw on our maps.