26 Jul

How to use Google Maps to show text directions

How to use Google maps to show text directions

In this tutorial, you will learn how to use Google Maps to show text directions between two places.

View Demo

Initialise Google Map

Create a blank Google Map with controls

Load Google Maps api in head section

Initialise map

Setup Autocomplete Search Inputs

Now we will setup start and end location inputs. Add the following code right after the map initialisation code.

Getting Text Directions

Now we are done with the basic setup to show text directions. Now we just need to make a call to Google to get directions between two places entered in search inputs.

Following function will be called on change event of search inputs

When you will select a start and end location, you will see the text directions  on the right hand side of Google map.

Draggable Directions

You can also make the directions draggable, so that you can drag the start and end location pin on the map.

Setting Travel Modes

You can also see text directions based on the mode of travel you are using. Here we will bind a change event to modes of travel select input.

This way you can create your fully customisable Google Map to show text directions between two places.

View Demo

Hope you find this article helpful. If you have any questions, please ask in comments.

 

The following two tabs change content below.

Vineet Garg

Sr. Web Developer at GuestHouser
I am passionate about technology and web development.

Latest posts by Vineet Garg (see all)