JavaScript Google Map

Here we code to show location Navigation, location directions steps and add function to add autocomplete place field.

Make some variables to store values of different functions as I create location 1 and 2 to get location data in it.

Take address1 and 2 variable to store values from user.

Take variable latlng to store map distance from google.

Take variable geocoder to store map location longitude and latitude geometry.


Add autocomplete function to input field and restricted it for specific country.

Get input from user in address1 variable then restrict it with country


// First create initialize() function and start finds the coordinates for the two locations and calls the showMap() function



// creates and shows the map



// create a new map object

// set the div id where it will be shown

// set the map options


// show route between the points


//Here we create direction display and get direction in a variable called map-direction-result.








Now make HTML to show output of given functions:

<div id=”form” style=”width:100%; height:20%”>

<table align=”center” valign=”center”>


                                     <td colspan=”7″ align=”center”>

<b>Find the distance between two locations</b>




<td colspan=”7″>&nbsp;</td> </tr>


<td>First address:</td>



<input type=”text” name=”address1″ id=”address1″ size=”50″ class=”controls” onKeyUp=”onkeyup_address1()”/>



<td>Second address:</td>


<td><input type=”text” name=”address2″ id=”address2″ size=”50″ class=”controls” onKeyUp=”onkeyup_address2()”/></td>



<td colspan=”7″>&nbsp;</td>



<td colspan=”7″ align=”center”><input type=”button” value=”Show” onClick=”initialize();” /></td>




<center><div style=”width:100%; height:10%” id=”distance_direct”></div></center>

<center><div style=”width:100%; height:10%” id=”distance_road”></div></center>

<center><div id=”map_canvas” style=”width:70%; height:54%”></div></center>


   <h2 align=”center” >Location Directions</h2>


   <div id=”map-direction-result” ></div>


   <div class=”frame-animation” frame-animation=”frame-1″></div>