• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Google  AJAX APIs
 

Google AJAX APIs

on

  • 2,307 views

The slide is talk about useful and interesting Google Ajax APIs

The slide is talk about useful and interesting Google Ajax APIs

Statistics

Views

Total Views
2,307
Views on SlideShare
2,303
Embed Views
4

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 4

http://www.linkedin.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Google  AJAX APIs Google AJAX APIs Presentation Transcript

    • Google AJAX APIsImplement rich, dynamic web sites entirely in JavaScript and HTML.Eric 2010
    • Outline• Self-Introduction• Google APIs Introduction• Google Ajax Search API• Google Maps API• Google Chart API• Google Data API
    • Self Introduction
    • Self Introduction• Eric
    • Google APIs Introduction
    • Google APIs Introduction• 8 category APIs• Over 80 APIs we can use• http://code.google.com/
    • Google Code Web Site• US site vs. Taiwan site
    • Developer Resources• Google Code Website • http://code.google.com/• Code Playground • http://code.google.com/apis/ajax/playground/• Firefox & Firebug • http://moztw.org/• Google Code Blog • http://googlecode.blogspot.com/
    • Some Interesting APIs #1• Google Account Authentication ‧ Get access into desktop or mobile applications.• Google AJAX Feed API ‧ Get access into desktop or mobile applications.• Google AJAX Language API ‧ Easily translate and detect multiple languages using JavaScript.• Android ‧ Build mobile apps for mobile devices.• Google App Engine ‧ Run your web applications on Googles infrastructure.• Google Apps ‧ Extend Google Apps, integrate or build new apps.• Blogger Data API ‧ Enable your apps to view and update Blogger content.
    • Some Interesting APIs #2• Google Calendar APIs and Tools ‧ Create and manage events, calendars• Google Chrome Extensions ‧ Modify and enhance the functionality of Google Chrome• Google Earth API ‧ Embed Google Earth into your web page.• KML ‧ Create and share content with Google Earth, Maps• Google Libraries API ‧ Load open source JavaScript libraries.• reCAPTCHA ‧ An anti-bot service.• YouTube APIs ‧ Integrate YouTube videos into your website or application.
    • WHAT LANGUAGES WE USEIN THIS OFFERING• JavaScript• HTML
    • Google AJAX Search API
    • Google AJAX Search API Intro• The Google AJAX Search API lets you put GoogleSearch in your web pages with JavaScript.• Getting Start ‧ Get Google AJAX Search API Key and start coding ‧ Or Generate cut-and-paste HTML, it’s an easy way• Web Resources ‧ http://code.google.com/apis/ajaxsearch/ ‧ http://groups-beta.google.com/group/Google-AJAX-Search-API ‧ http://code.google.com/apis/ajaxsearch/samples.html
    • Google AJAX Search API Wizards #1• http://code.google.com/apis/ajaxsearch/wizards.html
    • Google AJAX Search API Wizards #2• For Example : Video Search Wizard• http://www.google.com/uds/solutions/wizards/videosearch.html• Only 4 Steps • Customize it • Tell Google about your web site • Generate code for your web page • Paste code in your web page
    • "Hello World" of Google AJAX Search API #1• Sign-up for an AJAX Search API Key
    • "Hello World" of Google AJAX Search API #2• The "Hello, World" of Google AJAX Search API• Sample Code • http://www.google.com/uds/samples/apidocs/helloworld.html• Using the Google AJAX API Loader<script type="text/javascript"src="http://www.google.com/jsapi?key=ABCDEFG"></script><script type="text/javascript"> google.load("search", "1");</script>
    • "Hello World" of Google AJAX Search API #3• Call this function when the page has been loaded function initialize() { var searchControl = new google.search.SearchControl(); searchControl.addSearcher(new google.search.WebSearch()); searchControl.addSearcher(new google.search.NewsSearch()); searchControl.draw(document.getElementById("searchcontrol")); }• Execute Search function searchControl.execute("VW GTI");• Use google.setOnLoadCallback to register the specifiedhandler function google.setOnLoadCallback(initialize);• Put <div> in HTML <div id="searchcontrol">Loading</div>
    • Google AJAX Search API Overview• The Search Control This provides the user interface and coordination over a number of searcher objects• Searchers It defines the interface that all searcher services must implement• GResult the search results produced by the searcher objects• Searcher Options This class configures the behavior of searcher objects
    • Google AJAX Search API Overview #sample code1// create a searcher objectvar sc = new google.search.SearchControl();// add one or more searchers, specifying options as neededvar options = new google.search.SearcherOptions();options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);sc.addSearcher(new google.search.WebSearch(), options);...// activate the search control by calling its .draw() methodsc.draw(document.getElementById("myDiv"));
    • Google AJAX Search API Overview #sample code2<!-- A collection of web search results in the search control --><div class="gsc-results gsc-webResult"> <!-- A single web result in the search control --> <div class="gsc-result gsc-webResult"> <!-- A single web result, full structure defined below --> <div class="gs-result gs-webResult"></div> </div> ...</div><!-- Similar pattern for local, blog, etc. --><div class="gsc-results gsc-localResult"></div><div class="gsc-results gsc-blogResult"></div>
    • The Search Control• google.search.SearchControl• google.search.SearchForm• google.search.CustomSearchControl• GSmapSearchControl• GSvideoBar• GSnewsBar• GSvideoSearchControl• GSbookBar• GSblogBar
    • google.search.SearchControl #1• An instance of google.search.SearchControl represents asingle search control on a page•是用來裝載搜尋功能的控制容器,所有搜尋功能的物件都必須放入這個容器中才能運作。•要建立google.search.SearchControl物件,可以使用下列範例語法var searchControl = new google.search.SearchControl();
    • google.search.SearchControl #2- addSearcher(searcher, opt_options)•這個函式可以將搜尋器加入搜尋控制容器中。搜尋控制容器在最後執行搜尋動作的階段,會針對它所擁有的搜尋器進行相對應的搜尋與顯示搜尋結果的動作• searcher – 指定搜尋器的種類• opt_options – 非必填引數。這個引數可以針對搜尋器進行外觀與行為的細部設定
    • google.search.SearchControl #3- draw(element, GdrawOptions)•本函式會為每個加入搜尋控制容器的搜索器進行搜尋介面繪製的動作。只有在所有搜索器都已加入搜索控制容器後,才可以呼叫此函式。• element – HTML區塊元素。我們可以將搜尋控制容器放置到指定的HTML區塊元素之中。通常HTML區塊元素是指HTML中的<div>元素。• GdrawOptions – 非必填的引數。這個引數可以用來設定搜尋結果的顯示外觀。
    • google.search.SearchControl #4- setTimeoutInterval(timeoutInterval)•當我們利用draw函式中的Gdrawoptions引數來自訂搜尋輸入欄位時,就可以使用setTimeoutInterval這個函式。這個函式可以讓我們設定執行搜尋的時間間隔,每當使用者在搜索輸入欄位中鍵入搜尋關鍵字時,就會有計時器依據這個時間間隔開始進行倒數計時。當倒數結束,就會依據搜尋欄位中的關鍵字開始進行搜尋動作。timeoutInterval可填入之有效值 時間間隔google.search.SearchControl.TIMEOUT_SHORT 350msgoogle.search.SearchControl.TIMEOUT_MEDIUM 500msgoogle.search.SearchControl.TIMEOUT_LONG 700ms
    • google.search.SearchControl #5- execute(str)•本函式可以讓搜尋控制容器中所有的搜尋器依照所傳入的搜尋關鍵字進行搜尋的動作。• str – 搜尋關鍵字。
    • google.search.SearchControl #6 - setOnKeepCallback(object, method, opt_keepLabel)•本函式可以讓我們設定緊跟在搜尋結果後面的連結,以及按下此連結時會被呼叫的函式。當使用者點擊該連結後,會將該筆的搜尋結果物件傳送給我們所呼叫的函式。透過這種方式,我們就可以對搜尋結果進行更進一步的處理。• object – 要呼叫函式所屬的物件名稱。• method – 要呼叫的函式名稱。• opt_keepLabel – 功能按鈕的顯示樣式。屬性 說明google.search.SearchControl.KEEP_LABEL_SAVE 「保持」連結樣式google.search.SearchControl.KEEP_LABEL_INCLUDE 「包括」連結樣式google.search.SearchControl.KEEP_LABEL_COPY 「複製」連結樣式google.search.SearchControl.KEEP_LABEL_BLANK 空白連結樣式其他任意文字 顯示該文字連結
    • google.search.SearchControl #7- clearAllResults()•本函式可以清除目前搜尋控制容器中的所有搜尋結果。
    • google.search.SearchControl #8- setLinkTarget(linkTarget)•本函式指定當使用者點擊搜尋結果連結時,在哪一個網頁框架顯示該連結網頁。• linkTarget – 設定點擊搜尋結果時,在哪一個網頁框架顯示該連結網頁。
    • google.search.SearchControl #9- setSearchCompleteCallback(object, method)•我們可以透過setSearchCompleteCallback設定在搜尋動作完成時所呼叫的函式。要注意的是,搜尋控制容器中每一個搜尋器完成搜尋的時候就會執行一次要被呼叫的函式。舉例來說,如果搜尋控制容器中的搜尋器有兩個,該函式在搜尋動作完成後就會被執行兩次。• object - 要呼叫函式所屬的物件名稱。• method -要呼叫的函式名稱。
    • google.search.SearchControl #10- setSearchStartingCallback(object, method)•我們可以透過setSearchStartingCallback設定在搜尋動作開始時所呼叫的函式。要注意的是,搜尋控制容器中每一個搜尋器開始搜尋的時候就會執行一次要被呼叫的函式。舉例來說,如果控制元件中的搜尋器有兩個,該函式在搜尋動作開始時後就會被執行兩次。• object - 要呼叫函式所屬的物件名稱。• method -要呼叫的函式名稱。
    • google.search.SearchControl #11- setNoResultsString(str)•我們可以使用本函式設定當搜尋不到結果時,網頁所顯示的文字。• str - 當搜尋不到結果時,網頁所顯示的文字。
    • google.search.SearchForm #1• The google.search.SearchForm object is a light weightobject that is designed for exactly this use case. It providesapplications with a text input element, a search button, anoptional clear button, as well as all standard branding.••要建立google.search.SearchForm物件,可以使用下列範例語法var searchForm = new google.search.SearchForm(enableClear, element);• enableClear – 這個引數為 ture 時,搜索輸入欄位就會包含一個清除搜尋結果的按鈕,否則將不會有清除搜尋結果的按鈕。• element – HTML Element。
    • google.search.SearchForm #2- setOnSubmitCallback(object, method)• setOnSubmitCallback可以讓我們設定點選搜尋按鈕後所呼叫的物件與函式,此外搜尋輸入欄位的值也會被傳遞到要被呼叫的函式中。• object - 要呼叫函式所屬的物件名稱。• method -要呼叫的函式名稱。
    • google.search.SearchForm #3- setOnClearCallback(object, method)•本函式將會設定按下搜索輸入欄位的「清除」按鈕時被呼叫的物件與函式。如果在建立google.search.SearchForm物件時,沒有建立清除搜尋結果的按鈕,則呼叫此函式時會發生錯誤。此外,搜尋輸入欄位的值也會被傳遞到要被呼叫的函式中。• object - 要呼叫函式所屬的物件名稱。• method -要呼叫的函式名稱。
    • google.search.SearchForm #4- execute(query)•利用execute函式,可以讓搜尋器依照所傳入的搜尋關鍵字進行搜尋的動作。• query - 執行搜尋時所使用的關鍵字。
    • Searchers #1
    • Searchers #2• google.search.WebSearchvar searcher = new google.search.WebSearch();• google.search.LocalSearchvar searcher = new google.search.LocalSearch();• google.search.VideoSearchvar searcher = new google.search.VideoSearch();• google.search.BlogSearchvar searcher = new google.search.BlogSearch();
    • Searchers #3• google.search.NewsSearchvar searcher = new google.search.NewsSearch();• google.search.ImageSearchvar searcher = new google.search.ImageSearch();• google.search.BookSearchvar searcher = new google.search.BookSearch();• google.search.PatentSearchvar searcher = new google.search.PatentSearch();
    • GResult #1• Result objects are produced using a JSON encoding ofserver search requests.• 當我們透過搜尋器進行搜尋動作後,除了會在指定的網頁元素位置上顯示搜尋結果外,也會根據搜尋器的種類回傳不同的搜尋結果物件。瞭解搜尋結果物件的屬性,可以讓我們對搜尋結果物件進行更進一步的處理
    • GResult #2• Result objects are produced using a JSON encoding ofserver search requests.• 當我們透過搜尋器進行搜尋動作後,除了會在指定的網頁元素位置上顯示搜尋結果外,也會根據搜尋器的種類回傳不同的搜尋結果物件。瞭解搜尋結果物件的屬性,可以讓我們對搜尋結果物件進行更進一步的處理
    • Searcher Options• When adding a searcher to the search control, theGsearcherOptionsgoogle.search.SearcherOptions object maybe specified.// create a searcher options object// set up for open expansion mode// load a searcher with these optionsvar options = new google.search.SearcherOptions();options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);searchControl.addSearcher(new google.search.WebSearch(), options);
    • DrawOptions Options• When asking a search control to draw, you must specify acontainer for the control to draw within.• In addition to this required parameter, the searchcontrols .draw() method also accepts an optionalgoogle.search.DrawOptions object.// create a drawOptions objectvar drawOptions = new google.search.DrawOptions();drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);searchControl.draw(element, drawOptions);
    • Google Maps API
    • Google Maps API Family• Google Maps has a wide array of APIs that let you embedthe robust functionality and everyday usefulness of GoogleMaps into your own website and applications
    • Google Maps JavaScript API V3• V3: The Solution for Maps Applications for both theDesktop and Mobile Devices• The version 3 of the Google Maps API will look similar tothe existing version 2 of the Google Maps API.• Who uses Maps API: • Yelp: http://www.youtube.com/watch?v=jWmLCpE_nwg • 地圖日記• Web Resources • http://groups.google.com/group/google-maps-js-api-v3 • http://code.google.com/apis/maps/documentation/javascript/
    • "Hello World" of Google Maps V3 #1• Sample Code URL • http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html• Declaring Your Application as HTML5 <!DOCTYPE html>• Loading the Google Maps API<html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
    • "Hello World" of Google Maps V3 #2• Map DOM Elements<div id="map_canvas" style="width: 100%; height: 100%"></div>• Map Optionsvar myLatlng = new google.maps.LatLng(-34.397, 150.644);var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};• Create instancevar map = newgoogle.maps.Map(document.getElementById("map_canvas"), myOptions);
    • Geolocation• Geolocation refers to the identification of the geographiclocation of a user or computing device via a variety of datacollecton mechanisms.• Newer browsers are starting to support the W3C Geolocationstandard.// Try W3C Geolocation method (Preferred) if(navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position) { initialLocation = newgoogle.maps.LatLng(position.coords.latitude,position.coords.longitude); …… });}
    • Developing for Mobile Devices• You can detect iPhone and Android devices by inspecting thenavigator.userAgentfunction detectBrowser() { var useragent = navigator.userAgent; var mapdiv = document.getElementById("map_canvas"); if (useragent.indexOf(iPhone) != -1 || useragent.indexOf(Android) != -1 ) { mapdiv.style.width = 100%; mapdiv.style.height = 100%; } else { mapdiv.style.width = 600px; mapdiv.style.height = 800px; }}
    • Localization in the V3 Maps API• Language Localization<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false&language=ja">• Region Localization<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false&region=GB">
    • Base objects - LatLng• LatLng is a point in geographical coordinates, latitude and longitude. var latlng = new google.maps.LatLng(60, 105);Methods Return Value Descriptionequals(other:LatLng) boolean Comparison function. Returns the latitude inlat() number degrees. Returns the longitude inlng() number degrees. Converts to stringtoString() string representation. Returns a string of the formtoUrlValue() string "lat,lng" for this LatLng.
    • Base objects – LatLngBounds#1 • A LatLngBounds instance represents a rectangle in geographical coordinates. var c = new google.maps.LatLngBounds(latlngA, latlngB);Methods Return Value Description Returns true if the given lat/lng is incontains(latLng:LatLng) boolean this bounds. Returns true if this boundsequals(other:LatLngBounds) boolean approximately equals the given bounds. Extends this bounds to contain theextend(point:LatLng) LatLngBounds given point. Computes the center of thisgetCenter() LatLng LatLngBounds Returns the north-east corner of thisgetNorthEast() LatLng bounds. Returns the south-west corner of thisgetSouthWest() LatLng bounds. Returns true if this bounds shares anyintersects(other:LatLngBounds) boolean points with this bounds.isEmpty() boolean Returns if the bounds are empty.
    • Base objects – LatLngBounds#2 Converts the given map bounds to atoSpan() LatLng lat/lng span.toString() string Converts to string. Returns a string of the form "lat_lo,lng_lo,lat_hi,lng_hi" for this bounds, where "lo" corresponds to thetoUrlValue(precision?:number) string southwest corner of the bounding box, while "hi" corresponds to the northeast corner of that box. Extends this bounds to contain theunion(other:LatLngBounds) LatLngBounds union of this and the given bounds.
    • google.maps.Map• Language Localizationvarmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);• Some Functions setCenter(latlng:LatLng) setMapTypeId(mapTypeId:MapTypeId) setOptions(options:MapOptions) setZoom(zoom:number) getMapTypeId() getZoom()
    • Google Maps Javascript API V3 Controls• Navigation control• Scale control• MapType control• You dont access or modify controls directly. Instead, youmodify the maps MapOptions fields which affect the visibilityand presentation of controls. You can adjust control presentationupon instantiating your map (with appropriate MapOptions) ormodify a map dynamically by calling setOptions() to change themaps options.
    • The Default Control SetControl Large Screens Small Screens iPhone Android Large Small Mini- Pan/Zoom for Zoom for sizes "Android"Navigation sizes larger Not present smaller than control than 400x350px 400x350px Horizontal Bar Dropdown for Same as Same as for screens screens smallerMapType Large/Small Large/Small larger than than 320px Screens Screens 320px wide wideScale Not present Not present Not present Not present
    • Disabling the Default UIfunction initialize() { var myOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151), disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = newgoogle.maps.Map(document.getElementById("map_canvas"), myOptions);}
    • Adding Controls to the Map{ navigationControl: boolean, mapTypeControl: boolean, scaleControl: boolean}function initialize() { var myOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151), navigationControl: true, mapTypeControl : true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}
    • Control Options• Navigation control • google.maps.NavigationControlStyle.SMALL • google.maps.NavigationControlStyle.ZOOM_PAN • google.maps.NavigationControlStyle.ANDROID • google.maps.NavigationControlStyle.DEFAULT• MapType control • google.maps.MapTypeControlStyle.HORIZONTAL_BAR • google.maps.MapTypeControlStyle.DROPDOWN_MENU • google.maps.MapTypeControlStyle.DEFAULT
    • Control Positioningfunction initialize() { var myOptions = { zoom: 12, center: new google.maps.LatLng(-28.643387, 153.612224), mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.BOTTOM }, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN, position: google.maps.ControlPosition.TOP_RIGHT }, scaleControl: true, scaleControlOptions: { position: google.maps.ControlPosition.TOP_LEFT } } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}
    • Google Maps Javascript API V3 Events #1• UI Events • Other Events • click • drag • dblclick • dragend • mouseup • dragstart • mousedown • maptypeid_changed • mouseover • rightclick • mouseout• Map Events • zoom_changed • center_changed • bounds_changed • mousedown • mouseover • mouseout
    • Google Maps Javascript API V3 Events #2var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World!"});google.maps.event.addListener(marker, click, function() { map.setZoom(8);});
    • Google Maps Javascript API V3 Events #3• Accessing Arguments in UI Events • MouseEvent google.maps.event.addListener(map, click, function(event) { placeMarker(event.latLng); });Properties Type Description The latitude/longitude that was below thelatLng LatLng cursor when the event occurred.
    • Google Maps JavaScript API V3 Overlays #1• Overlays are objects on the map that are tied tolatitude/longitude coordinates, so they move when you drag orzoom the map. Overlays reflect objects that you "add" to themap to designate points, lines, areas, or collections of objects.• several types of overlays: • markers • polylines • overlay map types • info window • custom overlays
    • Google Maps JavaScript API V3 Overlays #2• Adding Overlays var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, }var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);var marker = new google.maps.Marker({ position: myLatlng, title:"Hello World!" }); // To add the marker to the map, call setMap(); marker.setMap(map);
    • Google Maps JavaScript API V3 Overlays #3• Removing Overlays• http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html// Removes the overlays from the map, but keeps them in the arrayfunction clearOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(null); } }}// Shows any overlays currently in the arrayfunction showOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(map); } }}// Deletes all markers in the array by removing references to themfunction deleteOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(null); } markersArray.length = 0; }}
    • Google Maps JavaScript API V3 Overlays #4• Markers var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World!" });
    • Google Maps JavaScript API V3 Overlays #5• Simple Icons var image = beachflag.png; var myLatLng = new google.maps.LatLng(-33.890542, 151.274856); var beachMarker = new google.maps.Marker({ position: myLatLng, map: map, icon: image });• Complex Icons var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, shape: shape, title: beach[0], zIndex: beach[3] });
    • Google Maps JavaScript API V3 Overlays #6• Polylines • A polyline supports the following stroke styles: • strokeColor • strokeOpacity • strokeWeight var flightPlanCoordinates = [ new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(21.291982, -157.821856), new google.maps.LatLng(-18.142599, 178.431), new google.maps.LatLng(-27.46758, 153.027892) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 }); flightPath.setMap(map);
    • Google Maps JavaScript API V3 Overlays #7• Polygons • A polygons supports the ploylines stroke styles and fill styles: • fillColor • fillOpacity var triangleCoords = [ new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737), new google.maps.LatLng(25.774252, -80.190262) ]; // Construct the polygon // Note that we dont specify an array or arrays, but instead just // a simple array of LatLngs in the paths property bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 }); bermudaTriangle.setMap(map);
    • Google Maps JavaScript API V3 Overlays #8• Groundvar oldmap = new google.maps.GroundOverlay( "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", imageBounds);oldmap.setMap(map);
    • Google Maps JavaScript API V3 Overlays #9• InfoWindows • MethodsMethods Return Value Descriptionclose() None Closes this InfoWindowgetContent() string|NodegetPosition() LatLnggetZIndex() numberopen(map:Map|StreetViewPanora Nonema, anchor?:MVCObject)setContent(content:string|Node) None• InfoWindow options • content • pixelOffset • position • maxWidth
    • Google Maps JavaScript API V3 Overlays #10• KML and GeoRSS Layers • The Google Maps API supports the KML and GeoRSS data formats fordisplaying geographic information. These data formats are displayed on amap using a KmlLayer object, whose constructor takes the URL of a publiclyaccessible KML or GeoRSS file.
    • Google Maps JavaScript API V3 Overlays #11• The Traffic Layer• The Bicycling Layer • http://gmaps-samples.googlecode.com/svn/trunk/mapcoverage_filtered.html
    • Google Maps JavaScript API V3 Services #1• Geocoding • Geocoding is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers or position the map.• Reverse Geocoding (Address Lookup) • The term geocoding generally refers to translating a human-readable address into a location on a map. The process of doing the converse, translating a location on the map into a human-readable address, is known as reverse geocoding.
    • Google Maps JavaScript API V3 Services #2• The GeocodeRequest object literal contains the following fields:• address: string (*)• latLng: LatLng (*)• bounds: LatLngBound• region: string• Geocoding Results results[]: { types[]: string, formatted_address: string, address_components[]: { short_name: string, long_name: string, types[]: string }, geometry: { location: LatLng, location_type: GeocoderLocationType viewport: LatLngBounds, bounds: LatLngBounds } }
    • Google Maps JavaScript API V3 Services #3• Geocodingfunction codeAddress() { var address = document.getElementById("address").value; geocoder.geocode( { address: address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); }
    • Google Maps JavaScript API V3 Services #4• Reverse Geocoding function codeLatLng() { var input = document.getElementById("latlng").value; var latlngStr = input.split(",",2); var lat = parseFloat(latlngStr[0]); var lng = parseFloat(latlngStr[1]); var latlng = new google.maps.LatLng(lat, lng); geocoder.geocode({latLng: latlng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { map.setZoom(11); marker = new google.maps.Marker({ position: latlng, map: map }); infowindow.setContent(results[1].formatted_address); infowindow.open(map, marker); } } else { alert("Geocoder failed due to: " + status); } }); }
    • Google Maps JavaScript API V3 Services #5• The DirectionsRequest object literal contains the following fields:{ origin: LatLng | String, destination: LatLng | String, travelMode: DirectionsTravelMode, unitSystem: DirectionsUnitSystem, waypoints[]: DirectionsWaypoint, optimizeWaypoints: Boolean, provideRouteAlternatives: Boolean, avoidHighways: Boolean, avoidTolls: Boolean region: String}
    • Google Maps JavaScript API V3 Services #6• Street Viewvar fenway = new google.maps.LatLng(42.345573,-71.098326); var mapOptions = { center: fenway, zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true };var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    • Google Maps JavaScript API V3 Map Types• Basic Map Types • MapTypeId.ROADMAP • MapTypeId.SATELLITE • MapTypeId.HYBRID • MapTypeId.TERRAIN
    • Google Chart Tools
    • Google Chart Tools• The Google Chart Tools enable adding live charts to any webpage.• The advantages of the Google Chart Tools • A rich gallery of visualizations provided as: • Image charts - using a simple URL request to a Google chart server • Interactive charts - using a Google developed JavaScript library • Can read live data from a variety of data sources • Simple to use and free
    • Google Chart Tools – Image Charts #1• Chart Gallery • http://code.google.com/apis/chart/docs/gallery/chart_gall.html
    • Google Chart Tools – Image Charts #2• Chart Wizard • http://imagecharteditor.appspot.com/
    • Google Chart Tools – Image Charts #3• The Google Chart API returns a chart image in response to aURL GET or POST request.http://chart.apis.google.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...OR<form action=http://chart.apis.google.com/chart method=POST> <input type="hidden" name="cht" value="lc" /> <input type="hidden" name="chtt" value="This is | my chart" /> <input type=hidden name=chs value=600x200 /> <input type="hidden" name="chxt" value="x,y" /> <input type=hidden name=chd value=t:40,20,50,20,100/> <input type="submit" /></form>
    • Google Chart Tools – Image Charts #4• Glossary of Chart Terms
    • Google Chart Tools – Image Charts #5• Chart Play Ground • http://code.google.com/apis/chart/docs/chart_playground.html
    • Google Chart Tools – Interactive Charts #1• The key steps for embedding a visualization in your page • Add a <div> to your page <!--Div that will hold the pie chart--> <div id="my_chart_div"></div> • Load your libraries<!--Load the AJAX API--><script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> // Load the Visualization API and the piechart package. google.load(visualization, 1, {packages:[piechart]}); // Load multiple Google packages: // google.load(visualization, 1, {packages:[piechart, table, linechart]});<script>
    • Google Chart Tools – Interactive Charts #2• The key steps for embedding a visualization in your page • Prepare your data var data = new google.visualization.DataTable(); // Declare columns and rows. data.addColumn(string, Task); // Column 0 is type string and has label "Task". data.addColumn(number, Hours per Day); // Column 1 is type number and has label "Hours perDay". // Add data. data.addRows([ [Work, 11], [Eat, 2], [Commute, 2], [Watch TV, 2], [Sleep, 7] ]); • Create an instance of your visualization • Draw your visualization
    • Google Chart Tools – Interactive Charts #3• The key steps for embedding a visualization in your page • Create an instance of your visualizationvar chart = new google.visualization.PieChart(document.getElementById(chart_div)); • Draw your visualizationchart.draw(data, {width: 400, height: 240, is3D: true, title: My Daily Activities});
    • Google Chart Tools – Interactive Charts #4• Code Example • http://code.google.com/apis/visualization/documentation/examples.html
    • Google Data Protocol
    • Google Data Protocol• The Google Data Protocol provides a secure means forexternal developers to write new applications that let endusers access and update the data stored by many Googleproducts.• External developers can use the Google Data Protocoldirectly, or they can use any of the supported programminglanguages provided by the client libraries.• The protocol currently supports two primary modes of access: • AtomPub • JSON• http://code.google.com/apis/gdata/
    • Google Data Protocol – API Directory• http://code.google.com/apis/gdata/docs/directory.html
    • Authentication in the Google Data Protocol• AuthSub• Oauth • http://googlecodesamples.com/oauth_playground/index.php• ClientLogin• Gadgets
    • Google Data Protocol – For Example• Google Calendar Data API • Retrieving all calendars • https://www.google.com/calendar/feeds/default/allcalendars/full• Picasa Web Albums Data API • Requesting a list of albums • http://picasaweb.google.com/data/feed/api/user/userID