Introduction
It would be great fun to use and work with the Google Maps JavaScript API.
In this article, I've created a simple navigation panel that looks and works like Google Maps. Of course there will be some difference in design but the functionality will be the same as in Google Maps.
First of all, all you need is a Google Maps JavaScript API to proceed in this project.
Go to this link and obtain you own personal
API key.
Here from the preceding link use the procedure described there and you can get your own API Key.
Now all you need to do is to create your own design. The following is the screenshot of the template I designed.
Now please find the code below.
Home.html
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Google Maps</title>
- <link rel="stylesheet" href="css/style.css" type="text/css">
- <!--Deploy Script For Google Maps API-->
- <script type="text/javascript"
- src="https://maps.googleapis.com/maps/api/js?key=YOUR_OWN_API_KEY &sensor=true">
- </script>
- <!--API Deployment Script Ends Here-->
- <!-- deploy this script AFTER the maps api-->
-
- <script src="scripts/google-maps-3-vs-1-0.js" type="text/javascript"></script>
- <!--Deployments Ends-->
- <script type="text/javascript" src="javascript/mainJavaScript.js"></script>
- <script type="text/javascript">
- function myfunction(cc) {
-
- var locations = cc;
- for (i = 0; i < locations.length; i++) {
- var map = new google.maps.Map(document.getElementById('map_canvas'), {
- zoom: 14,
-
- center: new google.maps.LatLng(locations[i][1], locations[i][2]),
- mapTypeId: google.maps.MapTypeId.ROADMAP
- });
- }
- var infowindow = new google.maps.InfoWindow();
-
- var marker, i;
-
- for (i = 0; i < locations.length; i++) {
- marker = new google.maps.Marker({
- position: new google.maps.LatLng(locations[i][1], locations[i][2]),
- map: map
- });
-
- google.maps.event.addListener(marker, 'click', (function (marker, i) {
- return function () {
- infowindow.setContent(locations[i][0]);
- infowindow.open(map, marker);
- }
- })(marker, i));
- }
- }
-
- </script>
- <script src="javascript/style_script.js" type="text/javascript"></script>
- </head>
-
- <body onLoad="initialize()">
- <div class="main">
- <header>
- <div id="search_cnt">
-
- <center>
- <table id="tab">
- <tr>
- <th><input type="text" class="text_box" value="Enter Place To Search" id="search" onBlur="onblur_js()" onFocus="onfocus_js();" /></th>
- <th><input type="button" class="btn_box" onClick="initialize()" value="Search"/></th>
- </tr>
- </table>
- </center>
- </div>
- </header>
- <aside id="cnt1">
- <div>
- <center>
- <p><label title="Directions" class="label_font">Directions</label></p>
- <table style="margin-top:30px;">
- <tr>
- <td><img src="images/start.png" height="25px" width="25px"/></td>
- <td>
- <input type="text" class="text_box" value="Choose start point" onBlur="st_blur_js()" onFocus="st_focus_js()" id="first_location"/>
- </td>
- </tr>
- <tr>
- <td><img src="images/dest.png" height="25px" width="25px" /></td>
- <td>
- <input type="text" class="text_box" value="Choose end Point" onBlur="en_blur_js()" onFocus="en_focus_js()" id="second_location"/>
- </td>
- </tr>
- <tr>
- <th colspan="2">
- <select id="dirtype" class="drop_list" style="font-family:'Comic Sans MS', cursive">
- <option value="1">Driving</option>
- <option value="2">Walking</option>
- <option value="3">Transit</option>
- </select>
- </th>
- </tr>
- <tr>
- <th colspan="2"><input type="button" class="btn_box" value="Find Direction" id="getDirection" onClick="calcRoute()"/></th>
- </tr>
- </table>
- </center>
- </div>
- <div style="overflow:auto; max-height:250px">
- <div id="directionsPanel"></div>
- </div>
- </aside>
-
- <aside id="cnt2">
- <!--To print map-->
- <div id="map_canvas" style="height:100%;"></div>
- </aside>
- <footer>
- <br/>
- <center>
- © Designed By Paras Babbar. All Right Reserved: Google Custom Maps.
- </center>
- </footer>
- </div>
-
- </body>
Here, replace YOUR_OWN_API_KEY with the API key you received.
MainJavaScript.js
-
-
- var directionsDisplay;
- var directionsService = new google.maps.DirectionsService();
- var map;
- var myCenter = new google.maps.LatLng(28.63100000000001, 77.21750683593746);
- function initialize() {
-
- directionsDisplay = new google.maps.DirectionsRenderer();
-
- var mapOptions = {
- center: myCenter,
- zoom: 8,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
-
- map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
- directionsDisplay.setMap(map);
- directionsDisplay.setPanel(document.getElementById('directionsPanel'));
-
-
-
-
- var points;
- var latitude;
- var longitude;
-
-
-
- var locate = document.getElementById('search').value;
-
-
-
- var geocoder = new google.maps.Geocoder();
- var address = locate;
-
- geocoder.geocode({ 'address': address }, function (results, status) {
-
- if (status == google.maps.GeocoderStatus.OK) {
- latitude = results[0].geometry.location.lat();
- longitude = results[0].geometry.location.lng();
- points = new google.maps.LatLng(latitude, longitude);
-
-
-
- var mapProp = {
- center: points,
- zoom: 12,
- panControl: true,
- zoomControl: true,
- mapTypeControl: true,
- scaleControl: true,
- streetViewControl: true,
- overviewMapControl: true,
- rotateControl: true,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
-
- var map = new google.maps.Map(document.getElementById('map_canvas'), mapProp);
- map.setTilt(45);
- var marker = new google.maps.Marker({
- position: points,
-
- });
-
- marker.setMap(map);
-
- }
- });
- document.getElementById('directionsPanel').innerHTML = "";
- }
-
- function calcRoute() {
- var direction_type = document.getElementById('dirtype').value;
- if (direction_type == '1') {
- drive();
- }
- else if (direction_type == '2') {
- walk();
- }
- else if (direction_type == '3') {
- trans();
- }
-
- }
-
-
- function drive() {
- document.getElementById('search').value = "Enter Place To Search";
- initialize();
- var start = document.getElementById('first_location').value;
- var end = document.getElementById('second_location').value;
- var request = {
- origin: start,
- destination: end,
- travelMode: google.maps.TravelMode.DRIVING
- };
- directionsService.route(request, function (response, status) {
- if (status == google.maps.DirectionsStatus.OK) {
- directionsDisplay.setDirections(response);
- }
- });
- }
-
-
- function walk() {
- document.getElementById('search').value = "Enter Place To Search";
- initialize();
- var start = document.getElementById('first_location').value;
- var end = document.getElementById('second_location').value;
- var request = {
- origin: start,
- destination: end,
- travelMode: google.maps.TravelMode.WALKING
- };
- directionsService.route(request, function (response, status) {
- if (status == google.maps.DirectionsStatus.OK) {
- directionsDisplay.setDirections(response);
- }
- });
- }
-
-
- function trans() {
- document.getElementById('search').value = "Enter Place To Search";
- initialize();
- var start = document.getElementById('first_location').value;
- var end = document.getElementById('second_location').value;
- var request = {
- origin: start,
- destination: end,
- travelMode: google.maps.TravelMode.TRANSIT
- };
- directionsService.route(request, function (response, status) {
- if (status == google.maps.DirectionsStatus.OK) {
- directionsDisplay.setDirections(response);
- }
- });
- }
The preceding code is the main JavaScript code that plays a vital role in the functioning of the maps.
Let us see how this code works.
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var myCenter = new google.maps.LatLng(28.63100000000001, 77.21750683593746);
Here we have created a variable directionDisplay in the first line.
In the second line we created a direction service object, in other words, directionService of the Google Maps JavaScript API.
In the third line, we have a variable map and in the last line we created an object, myCenter, of the Google Maps LatLng class for passing the latitudes and longitudes of New Delhi.
You can change them accordingly.
The following is the main function used to display the map:
- function initialize() {
-
- directionsDisplay = new google.maps.DirectionsRenderer();
-
- var mapOptions = {
- center: myCenter,
- zoom: 8,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
-
- map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
- directionsDisplay.setMap(map);
- directionsDisplay.setPanel(document.getElementById('directionsPanel'));
Here we created an object directionDisplay, whose main work is to fetch values and display the map.
The variable mapOptions holds the following three attributes:
The purpose of center is to fetch the latitudes and longitudes and display the map accordingly. In the preceding screen shot of my application, you can see that when the map is loaded the center is New Delhi because in this application I used latitudes and longitudes as the default center (this can be changed depending on the requirements).
Second is the Zoom, this attribute is used to set the zoom value for when the map is loaded, you can change it accordingly.
The third one is the mapTypeId, this is basically used to display the type of map, here I'm displaying a ROADMAP.
If you see in the HTML code we have a block to display the map.
- <!--To print map-->
- <div id="map_canvas" style="height:100%;"></div>
Here
- map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
This line of code is used to display the map.
We also have a block to display the direction panel.
- <div style="overflow:auto; max-height:250px">
- <div id="directionsPanel"></div>
- </div>
This block displays the direction, the following piece of code is responsible for the direction panel.
- directionsDisplay.setPanel(document.getElementById('directionsPanel'));
See that in the following screen shot.
The following is the last statement in this function.
- directionsDisplay.setMap(map);
Is displays the directions.
The following piece of code works when we search for a place from the search bar.
-
-
- var points;
- var latitude;
- var longitude;
-
-
-
- var locate = document.getElementById('search').value;
-
-
-
- var geocoder = new google.maps.Geocoder();
- var address = locate;
-
- geocoder.geocode({ 'address': address }, function (results, status) {
-
- if (status == google.maps.GeocoderStatus.OK) {
- latitude = results[0].geometry.location.lat();
- longitude = results[0].geometry.location.lng();
- points = new google.maps.LatLng(latitude, longitude);
-
-
-
- var mapProp = {
- center: points,
- zoom: 12,
- panControl: true,
- zoomControl: true,
- mapTypeControl: true,
- scaleControl: true,
- streetViewControl: true,
- overviewMapControl: true,
- rotateControl: true,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
-
- var map = new google.maps.Map(document.getElementById('map_canvas'), mapProp);
- map.setTilt(45);
- var marker = new google.maps.Marker({
- position: points,
-
- });
-
- marker.setMap(map);
-
- }
- });
- document.getElementById('directionsPanel').innerHTML = "";
- }
Let's see how this code works.
- var locate = document.getElementById('search').value;
This code fetches the location value from the search bar using:
In this example, the value will be Karol Bagh, New Delhi.
- var geocoder = new google.maps.Geocoder();
- var address = locate;
-
- geocoder.geocode({ 'address': address }, function (results, status) {
-
- if (status == google.maps.GeocoderStatus.OK) {
- latitude = results[0].geometry.location.lat();
- longitude = results[0].geometry.location.lng();
- points = new google.maps.LatLng(latitude, longitude);
-
-
-
- var mapProp = {
- center: points,
- zoom: 12,
- panControl: true,
- zoomControl: true,
- mapTypeControl: true,
- scaleControl: true,
- streetViewControl: true,
- overviewMapControl: true,
- rotateControl: true,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
In this piece of code, using the geocoder class of the Google Maps API, we can fetch the latitude and longitude of the location that we entered in the search bar.
You can see in the comments, what everything in each line of code does.
Last but not the least:
- function calcRoute() {
- var direction_type = document.getElementById('dirtype').value;
- if (direction_type == '1') {
- drive();
- }
- else if (direction_type == '2') {
- walk();
- }
- else if (direction_type == '3') {
- trans();
- }
-
- }
This piece of code is for searching for directions from location A to location B.
It is calling the following three functions:
- Drive() that is used to display the navigation in driving mode.
- Walk(), that is used to display the navigation in walking mode.
- Trans(), that is used to display the navigation in transit mode.
Style_Script.js
-
-
-
-
- function onfocus_js()
- {
- var txt= document.getElementById('search').value;
- if(txt=="Enter Place To Search")
- {
- document.getElementById('search').value="";
- }
- }
-
- function onblur_js()
- {
- var txt=document.getElementById('search').value;
- if(txt=="" || txt==NULL)
- {
- document.getElementById('search').value="Enter Place To Search";
- }
- }
-
- function st_blur_js()
- {
- var txt=document.getElementById('first_location').value;
- if(txt==""|| txt==NULL)
- {
- document.getElementById('first_location').value="Choose start point";
- }
- }
-
- function st_focus_js()
- {
- var txt=document.getElementById('first_location').value;
- if(txt=="Choose start point")
- {
- document.getElementById('first_location').value="";
- }
- }
-
- function en_blur_js()
- {
- var txt=document.getElementById('second_location').value;
- if(txt=="" || txt==NULL)
- {
- document.getElementById('second_location').value="Choose end Point";
- }
- }
-
- function en_focus_js()
- {
- var txt=document.getElementById('second_location').value;
- if(txt=="Choose end Point")
- {
- document.getElementById('second_location').value="";
- }
- }
This script is used for designing purposes.
Demo Work
Reference