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.

javascript-1

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

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

javascript-2

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

javascript-3

javascript-4

// creates and shows the map

javascript-5

javascript-6

// create a new map object

// set the div id where it will be shown

// set the map options

javascript-7

// show route between the points

javascript-8

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

javascript-9

 

javascript-10

 

 

HTML

 

Now make HTML to show output of given functions:

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

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

<tr>

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

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

</td>

</tr>

<tr>

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

<tr>

<td>First address:</td>

<td>&nbsp;</td>

<td>

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

</td>

<td>&nbsp;</td>

<td>Second address:</td>

<td>&nbsp;</td>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

</table>

</div>

<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>

 

</body>

</html>