SRNMN COLLEGE OF APPLIED SCIENCES Shivamogga-577201

DEPARTMENT OF COMPUTER SCIENCE Project Report On

BENGALURU CITY TRACKER

Submitted to KUVEMPU UNIVERSITY in the partial fulfillment of Bachelor of computer application (BCA) degree in the academic year 2012-2013. SUBMITTED BY PAVAN.R SANDESH.N.RAO BC100022 BC100042

Under the guidance of

Mr. Pradeep.G.S. B.E,

Lecturer Dept. of CS S.R.N.M.N. College Shivamogga.

2012-13

SRNMN COLLEGE OF APPLIED SCIENCES Shivamogga-577201

DEPARTMENT OF COMPUTERSCIENCE CERTIFICATE This is to certify that the project work entitled BENGALURU CITY TRACKER carried out by PAVAN.R ,SANDESH.N.RAO students of VI th semester, BCA, S.R.N.M.N.College of Applied Sciences, Shivamogga for the partial fulfillment of the requirement for the award of Bachelor of Science degree by Kuvempu University during the academic year 2012-2013.

Project Guide
Mr.Pradeep.G.S., B.E

Head of the Department

Mrs.Y.M.Sujatha.,B.E.,M.C.A.,M.Phill

Principal
Prof.R.K.Baliga.M.Sc

Date : Place:

Examiner: 1. 2.

ACKNOWLEDGEMENT
We express my deep sense of gratitude to Professor R K Baliga, Principal of SRNM College, Shimoga for his encouragement and moral support throughout the course and valuable Suggestion during the work. We express special gratitude to Mrs Sujatha Y.M( Head of the Department,Computer science) And Mr. Pradeep G.S, our project guide for their constant encouragement and for valuable suggestion for the completion of my work, without whom, this project could not have been completed. We would like to thank all the Staff and non teaching staff of Computer Science of SRNM College, Shimoga for their support and encouragement in the project. We oblige to thank the SRNM College, Shimoga, Kuvempu University for providing opportunity to study here and to carry out project work successfully.

Pavan.R Sandesh.N.Rao

CONTENTS:
1. Introduction

Page No

2. JavaScript Api V3 3. Module Description. 4. 4. Requirement Analysis

4.1. Hardware Requirements 4.2. Software Requirements

5. System Architecture 6.Coding 7. Screen Shots 8. Conclusion & Future Enhancements Bibliography

1. INTRODUCTION

Banglore city is the capital of Indian state of Karnataka. Located on the Deccan plateau in the south eastern part of Karnataka. Banglore is the Indias third most populous city and fifth most populous urban agglomeration. Banglore is well known as a hub for Indias information technology sector. It is among the top 10 preferred entrepreneurial locations in the world. The visiting travelers need clear information about the places in the Banglore city. The residents of this city need more information about the places for their day to day activities. With this background, the current project aims at tracking information to finding the distance between places in Banglore city.

Existing system:
The residents and travelers of the city are finding problems in getting information about the locations of different places. People are contacting friends, relatives and unknown persons for getting information. People are wasting their time and money and sometimes are being cheated while getting proper information.

Proposed system:
Proper information about places and required locations can be easily obtained by this project. Travelers and visitors can get the accurate information about various places and plan their schedule.

2. JAVASCRIPT API V3 LANGUAGE:

JavaScript Api V3 is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed. JavaScript is a prototype-based scripting language that is dynamic, weakly typed, and has firstclass functions. Its syntax was influenced by the language C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. JavaScript's use in applications outside of web pagesfor example, in PDF documents, sitespecific browsers, and desktop widgetsis also significant. Newer and faster JavaScript VMs and frameworks built upon them (notably Node.js) have also increased the popularity of JavaScript for server-side web applications. JavaScript was formalized in the ECMAScript language standard and is primarily used as part of a web browser (client-side JavaScript). This enablesprogrammatic access to computational objects within a host environment The most common use of JavaScript is to write functions that are embedded in or included from HTML pages and that interact with the Document Object Model (DOM) of the page. Some simple examples of this usage are:

Loading new page content or submitting data to the server via AJAX without reloading the page (for example, a social network might allow the user to post status updates without leaving the page) Animation of page elements, fading them in and out, resizing them, moving them, etc. Interactive content, for example games, and playing audio and video Validating input values of a web form to make sure that they are acceptable before being submitted to the server. Transmitting information about the user's reading habits and browsing activities to various websites. Web pages frequently do this for web analytics, ad tracking, personalization or other purposes.

Because JavaScript code can run locally in a user's browser (rather than on a remote server), the browser can respond to user actions quickly, making an application more responsive. Furthermore, JavaScript code can detect user actions which HTML alone cannot, such as individual keystrokes. Applications such as Gmail take advantage of this: much of the userinterface logic is written in JavaScript, and JavaScript dispatches requests for information (such as the content of an e-mail message) to the server. The wider trend of Ajax programming similarly exploits this strength.

A JavaScript engine (also known as JavaScript interpreter or JavaScript implementation) is an interpreter that interprets JavaScript source code and executes the script accordingly. The first JavaScript engine was created by Brendan Eich at Netscape Communications Corporation, for the Netscape Navigator web browser. The engine, code-named SpiderMonkey, is implemented in C. It has since been updated (in JavaScript 1.5) to conform to ECMA-262 Edition 3. The Rhino engine, created primarily by Norris Boyd (formerly of Netscape; now at Google) is a JavaScript implementation in Java. Rhino, like SpiderMonkey, is ECMA-262 Edition 3 compliant. A web browser is by far the most common host environment for JavaScript. Web browsers typically create "host objects" to represent the Document Object Model (DOM) in JavaScript. The web server is another common host environment. A JavaScript webserver would typically expose host objects representing HTTP request and response objects, which a JavaScript program could then interrogate and manipulate to dynamically generate web pages. Because JavaScript is the only language that the most popular browsers share support for, it has become a target language for many frameworks in other languages, even though JavaScript was never intended to be such a language. Despite the performance limitations inherent to its dynamic nature, the increasing speed of JavaScript engines has made the language a surprisingly feasible compilation target. This documentation is designed for people familiar with JavaScript programming and objectoriented programming concepts. You should also be familiar with Google Maps from a user's point of view. This conceptual documentation is designed to let you quickly start exploring and developing applications with the Google Maps API. We also publish the Google Maps API Reference.

Obtaining an API Key

All Maps API applications* should load the Maps API using an API key. Using an API key enables you to monitor your application's Maps API usage, and ensures that Google can contact you about your application if necessary. If your application's Maps API usage exceeds the Usage Limits, you must load the Maps API using an API key in order to purchase additional quota. * Google Maps API for Business developers must not include a key in their requests. Please refer to Loading the Google Maps JavaScript API for Business-specific instructions. To create your API key: 1. Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account. 2. Click the Services link from the left-hand menu.
3. Activate the Google Maps API v3 service.

4. Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.

By default, a key can be used on any site. We strongly recommend that you restrict the use of your key to domains that you administer, to prevent use on unauthorized sites. You can specify which domains are allowed to use your API key by clicking the Edit allowed referrers... link for your key.. Declaring Your Application as HTML5 We recommend that you declare a true DOCTYPE within your web application. Within the examples here, we've declared our applications as HTML5 using the simple HTML5 DOCTYPE as shown below: <!DOCTYPE html> Most current browsers will render content that is declared with this DOCTYPE in "standards mode" which means that your application should be more cross-browser compliant. The DOCTYPE is also designed to degrade gracefully; browsers that don't understand it will ignore it, and use "quirks mode" to display their content. Note that some CSS that works within quirks mode is not valid in standards mode. In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify a size, they are assumed to be sized at 0 x 0 pixels. For that reason, we include the following <style> declaration: <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> This CSS declaration indicates that the map container <div> (named map-canvas) should take up 100% of the height of the HTML body. Note that we must specifically declare those percentages for <body> and <html> as well. Loading the Google Maps API <html> <head> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?

key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> </script> The URL contained in the script tag is the location of a JavaScript file that loads all of the symbols and definitions you need for using the Google Maps API. This script tag is required. The key parameter contains your application's API key. See Obtaining an API Key for more information. Note that this key is not the same key as used with the v2 API, and must be generated from the APIs console. The sensor parameter of the URL must be included, and indicates whether this application uses a sensor (such as a GPS locator) to determine the user's location. We've left this example as a variable set_to_true_or_false to emphasize that you must set this value to either true or false explicitly. Google Maps API for Business users should refer to Loading the Google Maps JavaScript API in the Business documentation for important information about loading the Maps API in their applications. HTTPS If your application is an HTTPS application, you may instead wish to load the Google Maps JavaScript API over HTTPS: <script src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE" type="text/javascript"></script> Loading the Maps API over HTTPS is necessary in SSL applications to avoid security warnings in most browsers, and is recommended for applications that include sensitive user data, such as a user's location, in requests. Libraries When loading the JavaScript Maps API via the http://maps.googleapis.com/maps/api/js URL, you may optionally load additional libraries through use of the libraries parameter. Libraries are modules of code that provide additional functionality to the main JavaScript API but are not loaded unless you specifically request them. For more information, see Libraries in the V3 Maps API.

3. Module Description
It has three modules, they are 1.START : In start module the source address is given by the user. 2.END : In end module the destination address is given by the user. 3.DISPLAY ROUTE : This module shows the distance between two places.

4. Hardware and Software requirement

4.1 Software requirements
Language Operating system Browser : Google maps Java Script ver. 3 : Windows XP or Higher Version : IE, Chrome and above.

4.2 Hardware requirements:

The minimum configuration required to run this project are: 1. Main Processor 2. RAM 3. Hard disk : Pentium IV & above : 512 MB : 40GB & above

5. SYSTEM ARCHITECTURE:

Java Script API V3

CLIENT/BROWSER

INTERNET

GOOGLE SERVER

6. CODING:
<script>

var directionDisplay; var directionsService = new google.maps.DirectionsService();

function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var mapOptions = { zoom: 20, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(12.967674, 77.57651) }; var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); var input = document.getElementById('start_id');

// var autocomplete = new google.maps.places.Autocomplete(input); var input1 = document.getElementById('dest_id'); input='Bangalore' + input + ', Bangalore';

input1='Bangalore' + input1 +',Bangalore'; //var autocomplete = new google.maps.places.Autocomplete(input1);

// autocomplete.bindTo('bounds', map);

var infowindow = new google.maps.InfoWindow(); var marker = new google.maps.Marker({ map: map }); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('directions-panel'));

var control = document.getElementById('control'); control.style.display = 'block'; map.controls[google.maps.ControlPosition.TOP].push(control); }

function calcRoute() { var start = document.getElementById('start_id').value; var end = document.getElementById('dest_id').value; var request = {

origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); var routes = response.routes[0];

// alert(routes.legs[0].distance.text);

} }); }

google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="control"> <strong>Start:</strong> <input type="text" name="start_id" id="start_id"><br />

<strong>End:</strong> <input type="text" name="dest_id" id="dest_id"><br/> <input type="button" value="Display Route" onClick="calcRoute();"> </div>

<div id="map_canvas"></div>

<div id="directions-panel"></div>

7. SCREEN SHOTS

8. CONCLUSION AND FUTURE ENHANCEMENT:

The current project will help in locating the distance between the places which will be useful for the residents and travelers for the Banglore city. After getting the directions we can add Images to a particular place. Moreover, we can add extra markers to the map. Also write a particular message on the marker. Weather Reports of the city can be shown.

BIBLIOGRAPHY
www.google.com www.wikipedia.com