Google maps


Published on


Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Google maps

  1. 1. Web Discussion Muhammed M.bassem and Marwa Ebrahim How web page working What is the difference between language and scripting Why scripting
  2. 2. OverviewWeb site widely used in ads for product , lifehabite/traditional sharing , .... etc but you have alittle time to have your client in your website inves-tigate all pages :PDesign webapps using Google web tool kit
  3. 3. AudienceThis documentation is designed for people familiar withJavaScript programming and object-oriented programmingconcepts. You should also be familiar with Google Mapsfrom a users point of view. There are many JavaScripttutorials available on the Web.This documentation is designed to let you quickly startexploring and developing cool applications with the GoogleMaps API.
  4. 4. Document sectionSmall chat about definationsJS long tutorialBasic Map ObjectsMap EventsMap ControlsMap OverlaysMap Services
  5. 5. Free Talk :)The difference between JS , JSP , PHP , PERL , Ruby , Java ,ASP , HTML ?! <name , function>PHP: Hypertext PreprocessorPerl : <REF:Wiki>Perl is a high-level, general-purpose, interpreted, dynamic programming language.Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting language tomake report processing easierRuby: <REF: Wiki>Ruby is a dynamic, reflective, general-purpose object-oriented programminglanguage that combines syntax inspired by Perl with Smalltalk-like features. Ruby originated in Japanduring the mid-1990s and was first developed and designed by Yukihiro "Matz" Matsumoto.What is the structure of web page ?!! <Specify by tags, tagsmean >what is the meta tag ?!! <hint: metadata>
  6. 6. The Present SituationDifference between <Style> and <Script> ?!!!Define CSS , js , XML?!! <name , use >what is JSON ?!Difference between JSON and XML ?!!<You an-swer this to next Session>
  7. 7. Development Tool :) 4 2 dayWhat is Google Map API ?! It is family The Maps APIis a free service, available for any web site that is free to consumers.Google Mapshas a wide array of APIs that let you embed the robust functionality and everydayusefulness of Google Maps into your own website and applications, and overlayyour own data on top of them Businesses that charge fees for access, track assetsor build internal applications must use Google Maps API Premier, which providesenhanced features, technical support and a service-level agreement.Original fore-casts which turned out to be wrongJava script V3 moduleWhats New The Places API May 10, 2011 Create applications that find anddisplay nearby Place information for your users. Search, check-in, and add newplaces.
  8. 8. JS is THE scripting language of the web.JS is used in billions of web pages to add functionality , validate forms , communicate with the server , and much more.You should have a basic knowledge of HTML.Example :
  9. 9. To insert a JS into your HTML code use the <script> tag.Syntax:<script type="text/javascript"> ... some JavaScript code ... </script>The lines between <script> and </script> contain the javascript and are executed by the browser.Browsers that do not support JS will display JS as a page content .To prevent this add the HTML comment tag as follow:<script type="text/javascript"> <!-- …Some javascript code… //--> </script>
  10. 10. Java Script can be put in the head and the body of HTML documentJS in body : Sometimes we want to execute a JavaScript when an event occurs, such as when a user clicks a button. When this is the case we can put the script inside a function. Events are normally used in combination with functions (like calling a function when an event occurs).
  11. 11. JS in Head: can place an unlimited number of scripts in your document, and you can have scripts in both the body and the head section at the same time.
  12. 12. Using an External JavaScriptJavaScript can also be placed in external files.External JavaScript files often contain code to be used on several different web pages.External JavaScript files have the file extension .js.External script cannot contain the <script></script> tags!Example :
  13. 13. Java Script StatementsJS is Case Sensitive.A JS statement is a command to a browser. The purpose of the command is to tell the browser what to do.It is normal to add a semicolon at the end of each executable statement but it’s is optional , and the browser is supposed to interpret the end of the line as the end of the statement.JS code is a sequence of JS statements ; Each statement is executed by the browser in the sequence they are written.
  14. 14. Java Script BlockJS statements can be grouped together in blocks.Blocks start with a left curly bracket {, and end with a right curly bracket }.The purpose of a block is to make the sequence of statements execute together.Example : Normally a block is used to group statements together in a function or in a condition (where a group of statements should be executed if a condition is met).
  15. 15. Java Script CommentsSingle line comments start with //. http:// Multi line comments start with /* and end with */. http:// can use comments in JS as in any programming language you know , Java for example.
  16. 16. Java Script VariablesRules for JavaScript variable names: 1-Variable names are case sensitive (y and Y are two different variables. 2-Variable names must begin with a letter or the underscore character.You declare JavaScript variables with the var keyword: var x; var carname;you can also assign values to the variables when you declare them: var x=5; var carname="Volvo";When you assign a text value to a variable, use quotes around the value.
  17. 17. A variable declared within a JavaScript function becomes LOCAL and can only be accessed within that function.You can have local variables with the same name in different functions.Local variables are destroyed when you exit the function.Variables declared outside a function become GLOBAL, and all scripts and functions on the web page can access it.Global variables are destroyed when you close the page.If you declare a variable, without using "var", the variable always becomes GLOBAL.
  18. 18. If you assign values to variables that have not yet been declared, the variables will automatically be declared as global variables.That statement : carname="Volvo"; will declare the variables x and carname as global variables (if they dont already exist).you can do arithmetic operations with JavaScript variables: y=x-5; z=y+5;
  19. 19. Java Script Operators= is used to assign values.JS Arithmetic Operators: given y=5, O p e ra to D e s c rip ti E x a m p l R e s u lt r on e + Ad d ition x= y+ 2 x= 7 - y= 5 - S u b tra c tion x = y -2 x= 3 - y= 5 * Mu ltip lic a tio x = y *2 x = 10 - n y= 5 / D iv is ion x = y /2 x = 2 .5 - y= 5 % Mod u lu s x= y% 2 x= 1 - y= 5 ++ In c re m e n t x= + + y x= 6 - y= 6 x= y+ + x= 5 - y= 6 -- D e c re m e n t x = --y x= 4 - y= 4
  20. 20. JS Assigning Operators given, x=10 - y=5 O p e ra tor E x a m p le S am e As R e s u lt = x= y x= 5 += x+ = y x= x+ y x = 15 -= x -= y x = x -y x= 5 *= x *= y x = x *y x = 50 /= x /= y x = x /y x= 2 %= x% = y x= x% y x= 0
  21. 21. The + operator can also be used to add string variables or text values together.To add two or more string variables together, use the + operator. txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2;If you add a number and a string, the result will be a string!
  22. 22. JavaScript Comparison and Logical OperatorsComparison Operators given, x=5 O p e ra tor D e s c rip tion E x a m p le == is e q u a l to x = = 8 is fa ls e x = = 5 is tru e === is ex a c tly e q u a l to (v a lu e a n d x = = = 5 is ty p e ) tru e x = = = “ 5 ” is fa ls e != is n ot e q u a l x != 8 is tru e > is g re a te r th a n x > 8 is fa ls e < is le s s th a n x < 8 is tru e >= is g re a te r th a n or e q u a l to x > = 8 is fa ls e <= is le s s th a n or e q u a l to x < = 8 is tru e
  23. 23. Logical Operators given, x=6 and y=3 O p e ra tor D e s c rip tio E x a m p le n && and (x < 1 0 && y > 1 ) is true || or (x = = 5 || y = = 5 ) is fa ls e ! n ot !(x = = y ) is tru eJS also contains a conditional operator that assigns a value to a variable based on some condition.Syntax : variablename=(condition)?value1:value2 Example : greeting=(visitor=="PRES")?"Dear President ":"Dear ";
  24. 24. JavaScript If...Else StatementsConditional statements are used to perform different actions based on different conditions. If Statement Syntax : if (condition) {   code to be executed if condition is true } Example:
  25. 25. If...else Statement Syntax : if (condition) {   code to be executed if condition is true } else {   code to be executed if condition is not true } Example:
  26. 26. If...else if...else Statement Syntax : if (condition1) {   code to be executed if condition1 is true } else if (condition2) {   code to be executed if condition2 is true } else {  code to be executed if neither condition1 nor condition2 is true } Example:
  27. 27. JavaScript Switch StatementSyntax : switch(n) { case 1:   execute code block 1 break; case 2:   execute code block 2 break; default:   code to be executed if n is different from case 1 and 2 }Example :
  28. 28. JavaScript Popup Boxes Alert Box Syntax : alert("sometext"); Example : Confirm Box Syntax : confirm("sometext"); Example :
  29. 29. Prompt Box Syntax : prompt("sometext","defaultvalue"); Example :
  30. 30. Java Script FunctionsTo keep the browser from executing a script when the page loads, you can put your script into a function.A function contains code that will be executed by an event or by a call to the function.You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external .js file).Functions can be defined both in the <head> and in the <body> section of a document. However, to assure that a function is read/loaded by the browser before it is called, it could be wise to put functions in the <head> section.
  31. 31. Syntax : function functionname(var1,var2,...,varX) { some code }Example : http:// The return statement is used to specify the value that is returned from the function. Example :
  32. 32. JavaScript For LoopSyntax:for(variable=startvalue;variable<=endvalue;variable=variable+ increment){   code to be executed}Example :
  33. 33. JavaScript While LoopSyntax:while (variable<=endvalue) {   code to be executed }Example :
  34. 34. JavaScript do While LoopSyntax:do {   code to be executed   } while (variable<=endvalue);Example :
  35. 35. JavaScript Break and Continue StatementsBreak Statement Example : Continue Statement Example :
  36. 36. JavaScript For ...In StatementThe statement loops through the properties of an object.Syntax :for (variable in object){  code to be executed}Example :
  37. 37. JavaScript EventsEvents are actions that can be detected by JavaScript.Acting to an event example : Examples of events: - A mouse click - A web page or an image loading - Mousing over a hot spot on the web page - Selecting an input field in an HTML form - Submitting an HTML form - A keystroke
  38. 38. onLoad and onUnload are triggered when the user enters or leaves the page. The onLoad event is often used to check the visitors browser type and browser version, and load the proper version of the web page based on the information.Both events are also often used to deal with cookies that should be set when a user enters or leaves a page.For example, you could have a popup asking for the users name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!".
  39. 39. onFocus, onBlur and onChangeare often used in combination with validation of form fields. Example : The checkEmail() function will be called whenever the user changes the content of the field: <input type="text" size="30" id="email" onchange="checkEmail()"> onSubmit is used to validate ALL form fields before submitting it. Example : The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, thesubmit should be cancelled. The function checkForm() returns either
  40. 40. onMouseOver Example :
  41. 41. JavaScript Try...Catch StatementThe try...catch statement allows you to test a block of code for errors.The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs.Syntax :Try{ //Run some code here}catch(err){ //Handle errors here
  42. 42. Example1 : Example2 :
  43. 43. JavaScript Throw StatementThe throw statement allows you to create an exception.Syntax : throw exceptionExample :
  44. 44. JavaScript Special CharactersIn JavaScript you can add special characters to a text string by using the backslash sign(). C od e O u tp u ts ’ s in g le q u ote ” d ou b le q uote b a c k s la s h n n e w lin e r c a rria g e re tu rn t ta p b backspace f form fe e d
  45. 45. JavaScript GuidelinesJavaScript is Case Sensitive.JavaScript ignores extra spaces. You can add white space to your script to make it more readable.You can break up a code line within a text string with a backslash. document.write("Hello World!");However, you cannot break up a code line like this: document.write ("Hello World!");
  46. 46. Lets PracticeDeclare ur application in HTML 5 using this tag<!DOCTYPE html><meta name="viewport" content="initial-scale=1.0,user-scalable=no" />The <meta> tag specifies that this map should bedisplayed full-screen and should not be resizable bythe user
  47. 47. Lets Continue PracticeThere is two type of mode used in HTML parsingquirks mode and standards modeBuiled ur CasCade Style sheet for quirks mode<style type=”text/css”>html{height:100%}body{height: 100%; margin: 0px; padding: 0px#map_canvas { height: 100% }// div GMAP name</style>
  48. 48. Are you Follow the code flow ?!Loading the Google Maps APIThe URLpoints to the location of a JavaScript file that loadsall of the symbols and definitions you need for usingv3 of the Google Maps API. Your page must containa script tag pointing to this URL.<script type="text/javascript"src=""></script>set a sensor parameter to indicate whether this application uses a sensor to determine the users location.
  49. 49. Ready to continue ? C this TipsWhen loading the Javascript Maps API via the URL, you mayoptionally load additional libraries through use of thelibraries parameter. Libraries are modules of code thatprovide additional functionality to the main Javascript APIbut are not loaded unless you specifically request themIf your application is an HTTPS application, you may insteadwish to load the Google Maps Javascript API over HTTPS.
  50. 50. Back 2 PracticeFor the map to display on a web page, we must reserve a spotfor it. Commonly, we do this by creating a named divelement and obtaining a reference to this element in thebrowsers document object model (DOM).Map DOM Elements:<div id="map_canvas" style="width: 100%; height: 100%"></div>
  51. 51. Hi FOSER !!!! Take 10 minute Reset :P
  52. 52. Map Options we want to center the map on a specific point, wealso create a latlng value to hold this location andpass this into the maps optionsWhat is Geocoding ?!The google.maps.LatLng object provides such amechanism within the Google Maps API. Youconstruct a LatLng object, passing its parameters inthe order { latitude, longitude }:var myLatlng = new google.maps.LatLng(latitude,longitude);LatLng objects have many uses within the Google Maps API. The google.maps.Marker object uses a LatLng in itsconstructor, for example, and places a marker overlay on the map at the given geographic location.
  53. 53. Continue Map Optionvar myOptions = { Zoom: 8,center: myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP }; MapTypeId :[google.maps.MapTypeId.]ROADMAP displays the normal, default 2D tiles of Google Maps.SATELLITE displays photographic tiles.HYBRID displays a mix of photographic tiles and a tile layer forprominent features (roads, city names).TERRAIN displays physical relief tiles for displaying elevation andwater features (mountains, rivers, etc.).where zoom 0 corresponds to a map of the Earth fully zoomed out, and higherzoom levels zoom in at a higher resolution.Q: what is diff. Between v2 and v3 google map Api?!
  54. 54. The Elementary Objectgoogle.maps.MapThe JavaScript class that represents a map is the Map class. Objects of thisclass define a single map on a page. (You may create more than one instanceof this class - each object will define a separate map on the page.) We create anew instance of this class using the JavaScript new operator.When you create a new map instance, you specify a <div> HTML element inthe page as a container for the map. HTML nodes are children of theJavaScript document object, and we obtain a reference to this element via thedocument.getElementById() methodvar map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);This code defines a variable (named map) and assigns that variable to a newMap object, also passing in options defined within the myOptions objectliteral. These options will be used to initialize the maps properties. Thefunction Map() is known as a constructor
  55. 55. Loading ...... <body onload="initialize()">While an HTML page renders, the document object model(DOM) is built out, and any external images and scripts arereceived and incorporated into the document object. To ensurethat our map is placed on the page after the page has fully loaded,we only execute the function which constructs the Map objectonce the <body> element of the HTML page receives an onloadevent. Doing so avoids unpredictable behavior and gives us morecontrol on how and when the map draws.The body tags onload attribute is an example of an event handler.The Google Maps JavaScript API also provides a set of eventsthat you can handle to determine state changes.
  56. 56. Notaions out school :)BRB Be Right BackFYI For Your InformationWRT With Respect ToASAP As Soon As Possible
  57. 57. Thank You CUL see you later :)
  58. 58. My answers :)Metadata is information about data. The <meta> tag provides metadata about the HTML document.Metadata will not be displayed on the page, but will be machine parsable.Meta elements are typically used to specify page description, keywords, author of the document, lastmodified, and other metadata.The <meta> tag always goes inside the head element.Differences Between HTML and XHTML WRT Meta tag In HTML the <meta> tag has no end tag.In XHTML the <meta> tag must be properly closed.JSON (JavaScript Object Notation) is a lightweight data-interchange format.It is easy for humans toread and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScriptProgramming Language,Standard ECMA-262 3rd Edition - December 1999. JSON is a text formatthatis completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java,JavaScript, Perl, Python, and many others. Theseproperties make JSON an ideal data-interchange language. the process of turning an address into a geographic point is known as geocoding. Geocoding is sup-ported in this release of the Google Maps API. In the Google Maps V2 API, there is no default map type. You must specifically set an initial map typeto see appropriate tiles.
  59. 59. Recommendation Siteswww.w3schools.com “Google labs”Google “ GWT ”Google “Ubuntu setup”Google eHow examples always
  60. 60. The Present SituationDevelopment Tool :) 4 2 dayLets PracticeLets Continue PracticeAre you Follow the code flow ?!Ready to continue ? C this TipsBack 2 PracticeHi FOSER !!!!Map OptionsContinue Map OptionThe Elementary ObjectLoading ......