Google Mapy (Jaroslav Bengl)

9,059 views

Published on

Published in: Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,059
On SlideShare
0
From Embeds
0
Number of Embeds
70
Actions
Shares
0
Downloads
89
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • JL
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • JL
  • JL
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • JL
  • JL
  • JL
  • JL
  • JL
  • JL
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • RJM
  • JL
  • JL
  • JL
  • JL
  • JL
  • JL
  • JL
  • RJM
  • RJM
  • Google Mapy (Jaroslav Bengl)

    1. 1. Google Maps API Jarda Bengl Product Manager Maps EMEA
    2. 2. Agenda <ul><ul><li>Maps API 101 </li></ul></ul><ul><ul><li>Sharing Geo data between applications (using KML) </li></ul></ul><ul><ul><li>Cool features </li></ul></ul><ul><ul><ul><li>Local Search </li></ul></ul></ul><ul><ul><ul><li>Static Maps </li></ul></ul></ul><ul><ul><ul><li>Location Detection </li></ul></ul></ul><ul><ul><ul><li>Custom Tile Layers </li></ul></ul></ul><ul><ul><ul><li>Flash API </li></ul></ul></ul><ul><ul><ul><li>Reverse Geocoding </li></ul></ul></ul><ul><ul><ul><li>Wikipedia and Panoramio Layers </li></ul></ul></ul><ul><ul><ul><li>Street View </li></ul></ul></ul><ul><ul><ul><li>Earth API </li></ul></ul></ul>
    3. 3. Maps API 101 The crash course
    4. 4. Google Maps 101: Adding a map to your page Javascript Key: CSS HTML #map { height:400px; width:400px; border:1px solid grey; } <ul><ul><li>1. CSS / HTML: Define a map container </li></ul></ul><div id='map'></div> map.addControl(new GLargeMapControl()); map.addControl(new GHierarchicalMapTypeControl()); <ul><ul><li>4. Add controls </li></ul></ul>var lat = 51.49494; var lng = -0.14657; var initialzoom = 17; map.setCenter(new GLatLng(lat, lng),initialzoom); <ul><ul><li>5. Initialise the map </li></ul></ul>var map = new GMap2(document.getElementById('map')); <ul><ul><li>3. Create the map </li></ul></ul><script type='text/javascript' src='http://www.google.com/jsapi?key=ABCDEFG'> <script>google.load('maps', '2.x');</script> <ul><ul><li>2. Use the Google AJAX API Loader </li></ul></ul>
    5. 5. Google Maps 101: A note on the AJAX loader Javascript Key: CSS HTML <script type='text/javascript' src='http://www.google.com/jsapi?key=ABCDEFG'> <ul><ul><li>1. Loading the AJAX loader library </li></ul></ul><script>google.load('maps', '2.x');</script> <ul><ul><li>2. Loading the Maps API </li></ul></ul><ul><ul><li>Loading the Maps API is a two step process: </li></ul></ul><ul><ul><li>Using the loader makes it easier to load in our other Google AJAX APIs, like the Local Search API or the Earth API </li></ul></ul><ul><ul><li>You can also opt to load the Maps API asynchronously after the body load, by specifying a callback function in the options to the loader. This is useful for loading the Maps API after the user has initiated some action: </li></ul></ul><script>google.load('maps', '2.x', {callback:loadMaps});</script>
    6. 6. Google Maps 101: Adding a marker Javascript Key: CSS HTML var marker = new GMarker(new GLatLng(lat, lon)); <ul><ul><li>1. Initialise the marker </li></ul></ul>GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml('<h1>London Googleplex</h1><p>Welcome!</p>'); }); <ul><ul><li>2. Make a bubble pop up when clicked </li></ul></ul>map.addOverlay(marker); <ul><ul><li>3. Display the marker </li></ul></ul>
    7. 7. Google Maps 101: Adding a line Javascript Key: CSS HTML var latOffset = 0.001; var lngOffset = 0.001; <ul><ul><li>1. Initialise lat/lon offset from our marker (optional) </li></ul></ul>var line = new GPolyline([new GLatLng(lat, lng-lngOffset), new GLatLng(lat, lng+lngOffset)]); <ul><ul><li>2. Create the line </li></ul></ul>map.addOverlay(line); <ul><ul><li>3. Display the line </li></ul></ul>
    8. 8. Google Maps 101 : Adding a polygon Javascript Key: CSS HTML var polygon = new GPolygon([ new GLatLng(lat, lng - lngOffset), new GLatLng(lat + latOffset, lng), new GLatLng(lat, lng + lngOffset), new GLatLng(lat - latOffset, lng), new GLatLng(lat, lng - lngOffset)], '#f33f00', 5, 1, '#ff0000', 0.2); <ul><ul><li>1. Create the polygon and set line / fill properties </li></ul></ul>map.addOverlay(polygon); <ul><ul><li>2. Display the polygon </li></ul></ul>
    9. 9. Google Maps 101 : Geocoding an address Javascript Key: CSS HTML var address1 = '1 Strand, London'; <ul><ul><li>1. Define the address to be geocoded </li></ul></ul>var geocoder = new GClientGeocoder(); <ul><ul><li>2. Create the GClientGeocoder object </li></ul></ul>geocoder.getLatLng(address1, function(point) { map.setCenter(point,initialzoom); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml('<h1>1 Strand</h1> <p>London</p>'); }); <ul><ul><li>3. Geocode the address and place a marker </li></ul></ul>
    10. 10. Google Maps 101 : Directions Javascript Key: CSS HTML #directions { width:400px;} <ul><ul><li>1. CSS / HTML: Define a text directions container </li></ul></ul><div id = 'directions'></div> Live Demo gdir = new GDirections(map,directions); <ul><ul><li>3. Create the GDirections object </li></ul></ul>gdir.load('from: ' + address1 + ' to: ' + address2); <ul><ul><li>4. Compute and display the directions </li></ul></ul>address2 = '76 Buckingham Palace Road, London' <ul><ul><li>2. Define the address(es) to be geocoded </li></ul></ul>gdir.load('from: ' + address1 + ' to: ' + address2, {travelMode:G_TRAVEL_MODE_WALKING}); <ul><ul><li>Note: to show walking directions, use </li></ul></ul>
    11. 11. Sharing Geo data between applications Using KML
    12. 12. KML: Introduction <ul><ul><li>Keyhole Markup Language (KML) is an XML-based language for expressing geographic annotation and visualization </li></ul></ul><ul><ul><li>Developed for use with Google Earth (originally named ‘Keyhole Earth Viewer’) </li></ul></ul><ul><ul><li>Became an official standard for geobrowsers in April 2008 </li></ul></ul><ul><ul><li>KML files specify a set of ‘place’ features (placemarks, images, polygons, 3D models, textual descriptions, etc.) and views </li></ul></ul><ul><ul><li>Each place has a longitude and a latitude </li></ul></ul><ul><ul><li>Views can be defined in terms of tilt, heading and altitude </li></ul></ul><ul><ul><li>KML files are very often distributed as KMZ files, which are zipped KML files with additional images and assets </li></ul></ul>
    13. 13. KML: Placemarks <?xml version='1.0' encoding='UTF-8'?> <kml xmlns='http://www.opengis.net/kml/2.2'> <Placemark> </kml> Headers <ul><ul><li>In this example, we create a placemark with a name, description and altitude </li></ul></ul><name>Simple placemark</name> </Placemark> <description> <![CDATA[ <h1>CDATA Tags are useful!</h1> <p><font color='red'>Text is <i>more readable</i> and <b>easier to write</b> when you can avoid using entity references.</font></p> ]]> </description> <Point> <coordinates>-122.0.4,0</coordinates> </Point> Placemark definition Placemark name Placemark HTML description Placemark lat/long/altitude
    14. 14. KML: Paths <LineString> <Placemark> <ul><ul><li>Now we create a path at altitude, extended down to the ground </li></ul></ul><name>Extruded path</name> </Placemark> <description>Path extended to the ground</description> <coordinates> -112.2550785337791,36.07954952145647,2357 -112.2549277039738,36.08117083492122,2357 -112.2552505069063,36.08260761307279,2357 -112.2564540158376,36.08395660588506,2357 </coordinates> Placemark definition Placemark name Line definition <extrude>1</extrude> </LineString> <tesselate>1</tesselate> Placemark name Extend down to the ground Break into smaller chunks Coordinate lat/long
    15. 15. KML: Styles Style definition <ul><ul><li>Finally, we define a style and attach it to a placemark </li></ul></ul>Line style definition <Style id='yellowLineGreenPoly'> <LineStyle> <color>7f00ffff</color> <width>4</width> </LineStyle> <Placemark> <PolyStyle> <color>7f00ff00</color> </PolyStyle> </Style> <styleUrl>#yellowLineGreenPoly</styleUrl> … <Placemark> Polygon style definition Placemark definition Link to style Placemark details
    16. 16. KML: Network links Folder definition <ul><ul><li>Network links allow content to be updated, based on data/algorithms hosted elsewhere </li></ul></ul><Folder> <name>Network Links</name> </Folder> Example: http://www.flickr.com/photos/medabeda/ <description>Network Links Example</description> <NetworkLink> <name>Random Placemark</name> <description>A simple server-side script that generates a new random placemark on each call</description> <Link> <href>http://api.flickr.com/services/feeds/geo/?id=58705278@N00&lang=en-us&format=kml_nl</href> </Link> </NetworkLink> Folder name Folder description Network Link definition Network Link name Network Link description Link definition Link URL (generates KML)
    17. 17. KML: What to do with it <ul><li>1. Display it in Google Maps </li></ul><ul><ul><li>KML can be displayed in Google Maps, Earth and Static Maps and other compatible geo applications </li></ul></ul>var kml = new GGeoXml('http://mydomain.com/myfile.kml'); map.addOverlay(kml) Javascript Key: CSS HTML <ul><ul><li>Can also view by pasting the URL into the Maps Search box </li></ul></ul><ul><ul><li>The KML Generator is a great way to learn </li></ul></ul>2. Display it in Google Maps for Mobile <ul><ul><li>Clicking a link to a KML document should open Google Maps for Mobile (if installed) </li></ul></ul>3. Display it in Google Earth <ul><ul><li>Google Earth identifies itself with KML file types </li></ul></ul><ul><ul><li>Contents can be saved in the ‘Places’ menu </li></ul></ul><ul><ul><li>KML can be added as an overlay in the Google Earth browser API </li></ul></ul>
    18. 18. KML: Submit it to Google! <ul><li>1. Create the KML content and include attribution tags </li></ul><ul><ul><li>KML can be submitted to the Google index, making it discoverable from google.com and maps.google.com </li></ul></ul><atom:author> <atom:name>J. K. Rowling</atom:name> </atom:author> <atom:link href='http://www.harrypotter.com' /> 2. Add a reference to the KML to your Sitemap file <url> <loc>http://www.example.com/example1.kml</loc> <geo:geo> <geo:format>kml</geo:format> </geo:geo> </url> 3. Submit the Sitemap to Google <ul><ul><li>Submit your Sitemap using Google Webmaster Tools </li></ul></ul>
    19. 19. Cool features Local Search Static Maps Location Detection Custom Tile Layers Flash API Reverse Geocoding Wikipedia and Panoramio Layers Street View Earth API
    20. 20. Local Search: Introduction <ul><ul><li>Many map developers want to let users easily search for businesses </li></ul></ul><ul><ul><li>The Local Search API lets you do this, but requires lots of implementation </li></ul></ul>Javascript Key: CSS HTML Local Search API http://www.google.com/uds/samples/random/lead.html google.load('search', '1'); function OnLoad() { var searchControl = new google.search.SearchControl(); Initialize AJAX Search var localSearch = new google.search.LocalSearch(); searchControl.addSearcher(localSearch); localSearch.setCenterPoint(&quot;New York, NY&quot;); searchControl.draw(document.getElementById(&quot;searchcontrol&quot;)); searchControl.execute(“Pizza Johannesburg&quot;); } google.setOnLoadCallback(OnLoad); Initialize Set center point Display
    21. 21. Local Search: GoogleBar The GoogleBar simplifies matters <ul><ul><li>GoogleBar Demo </li></ul></ul><ul><ul><li>Example implementation </li></ul></ul><ul><ul><li>Just one line of code to add: </li></ul></ul><ul><ul><li>This turns the boring Google logo into a shiny new search box, which uses the Local Search API to return results </li></ul></ul><ul><ul><li>Using GGoogleBarOptions, you can tweak the placement and type of results offered </li></ul></ul>map.enableGoogleBar(); Javascript Key: CSS HTML
    22. 22. Static Maps API: Introduction <ul><ul><li>The full Javascript Maps interface takes time to load </li></ul></ul><ul><ul><li>Scripts to process </li></ul></ul><ul><ul><li>Large images to download </li></ul></ul><ul><ul><li>When to use? </li></ul></ul><ul><ul><li>When the map isn’t the main focus of a page, and many users will not interact with it </li></ul></ul><ul><ul><li>If you cannot be sure the user has a Javascript-enabled browser </li></ul></ul><ul><ul><li>On mobile sites , where many users will not have a Javascript-enabled browser, and connections are slow </li></ul></ul>Solution: The Static Maps API reduces load time by displaying a static image, rather than the full Javascript Maps interface <ul><ul><li>The Static Maps API can be combined with the Javascript API for a better user experience </li></ul></ul>
    23. 23. Static Maps API: Examples <ul><li>1) Lonely Planet Mobile ( http://m.lonelyplanet.com/ ) </li></ul><ul><li>Displays static map of current user location </li></ul><ul><li>Plots nearby places to ‘sleep’, ‘play’, ‘eat’, ‘shop’ and ‘see’ </li></ul><ul><li>Links to Lonely Planet review on each date </li></ul><ul><li>2) Orbitz Mobile Update ( http://updates.orbitz.com/mobile/ ) </li></ul><ul><li>Generates static map of traffic incidents </li></ul><ul><li>Collects input from mobile users </li></ul>
    24. 24. Static Maps API: Implementation <ul><ul><li>Good news! Just add an <img> tag pointing to a well-crafted URL </li></ul></ul><ul><ul><li>e.g. <img src= 'http://maps.google.com/staticmap?center=-23.5,46.6&zoom=10&size=300x200&markers=-23.6,-46.6&key=ABCDEFG'> </li></ul></ul><ul><ul><li>You can specify a number of map arguments in the URL </li></ul></ul><ul><ul><li>Required : Center, Zoom, Size, Key </li></ul></ul><ul><ul><li>Optional : Format, Maptype, Markers, Path, Frame </li></ul></ul><ul><ul><li>Even better news! URLs can be generated in the Google Static Map Wizard </li></ul></ul>
    25. 25. Static Maps API: Tips and tricks <ul><ul><li>The Static Maps API can be combined with the Javascript API for a better user experience </li></ul></ul><ul><ul><li>1. Start with a static map, loading JS API only if user interacts with it </li></ul></ul><ul><ul><li>e.g. Gumtree Property Listings ( http://www.gumtree.com/london/98/28643598.html ) </li></ul></ul><ul><ul><li>2. Load the full page, then append the Maps code (so map only loaded after rest of page) </li></ul></ul><ul><ul><li>e.g. nearby.org.uk ( http://www.nearby.org.uk/google/static4.php ) </li></ul></ul>
    26. 26. Location Detection: Introduction <ul><ul><li>Until recently, the user had to centre/zoom on their location themselves </li></ul></ul><ul><ul><li>This was time-consuming and potentially repetitive for regular visitors </li></ul></ul><ul><ul><li>Three alternatives </li></ul></ul><ul><ul><li>HTML5 includes location detection (works with Firefox 3.5 and Chrome) </li></ul></ul><ul><ul><li>Gears includes location detection through best available method </li></ul></ul><ul><ul><ul><li>IP address, WiFi signal strength, cell ID, GPS, etc </li></ul></ul></ul><ul><ul><li>AJAX loader attempts to geolocate the user by IP address </li></ul></ul><ul><ul><ul><li>When an application uses the AJAX API loader, the loader attempts to geo locate the client based on it's IP address </li></ul></ul></ul><ul><ul><ul><li>If this process succeeds, the client's location is made available in the google.loader.ClientLocation property </li></ul></ul></ul><ul><ul><ul><li>If the process fails to find a match, this property is set to null </li></ul></ul></ul>Solution: Automatic location detection in the AJAX API
    27. 27. Location Detection: Implementation map.setCenter(lat,lng); <ul><ul><li>3. Centre the map </li></ul></ul>Javascript Key: CSS HTML if (google.loader.ClientLocation) { var lat = google.loader.ClientLocation.latitude; var lng = google.loader.ClientLocation.longitude; } <ul><ul><li>1. Check if ClientLocation object is defined </li></ul></ul>else { var lat = 51.0; var lng = 0.0; } <ul><ul><li>2. If not, set lat/long manually </li></ul></ul>ClientLocation.address.city ClientLocation.address.country ClientLocation.address.country_code ClientLocation.address.region <ul><ul><li>You can also access: </li></ul></ul>
    28. 28. Custom Tile Layers: Introduction <ul><li>All non-geocoding Maps functionality can be used with custom tile layers </li></ul><ul><li>Multiple rescaled images are required, corresponding to map zoom levels </li></ul><ul><ul><li>Each image must be divided into a grid of square tiles </li></ul></ul><ul><ul><li>The Google Maps interface can be used to browse multi-resolution images by defining a custom map type </li></ul></ul>Map Cruncher allows users to add alternative map imagery as an overlay One Prague Map charts house prices Another charts beer prices
    29. 29. Custom Tile Layers: Example Kremer Collection Photography ( www.thekremercollection.com ) <ul><ul><li>Map navigator and zoom level control </li></ul></ul><ul><ul><li>Content copyright notice </li></ul></ul><ul><ul><li>Orientation navigator </li></ul></ul>
    30. 30. Custom Tile Layers: Implementation (1) Javascript Key: CSS HTML var pic_tileLayers = [ new GTileLayer(copyrightCollection , 0, 17)]; pic_tileLayers[0].getTileUrl = customGetTileURL; pic_tileLayers[0].isPng = function() { return false; }; pic_tileLayers[0].getOpacity = function() { return 1.0; }; <ul><ul><li>2. Create a custom picture layer </li></ul></ul>var pic_customMap = new GMapType(pic_tileLayers, new GMercatorProjection(4),'Pic',{maxResolution:3, minResolution:0}); <ul><ul><li>3. Define a new map type </li></ul></ul>map = new GMap2(map,{mapTypes:[pic_customMap]}); map.setCenter(new GLatLng(centreLat, centreLon), initialZoom,pic_customMap); <ul><ul><li>4. Create and initialise the custom map </li></ul></ul>#map { height:400px; width:400px; border:1px solid grey; } <ul><ul><li>1. CSS / HTML: Define a map container </li></ul></ul><div id='map'></div>
    31. 31. Custom Tile Layers: Implementation (2) Javascript Key: CSS HTML <ul><ul><li>Good news: The 3 rd Party Google Maps Image Cutter software can be used to automatically generate image tiles and writes this code for you </li></ul></ul>function customGetTileURL(a,b) { var c=Math.pow(2,b); var d=a.x; var e=a.y; var f='t'; for(var g=0;g<b;g++){ c=c/2; if(e<c){ if(d<c){f+='q'} else{f+='r';d-=c} } else{ if(d<c){f+='t';e-=c} else{f+='s';d-=c;e-=c} } } return 'tiles/'+f+'.jpg' } <ul><ul><li>5. Display the correct tile (the clever bit) </li></ul></ul>
    32. 32. Flash API: Introduction <ul><ul><li>The Javascript API has limitations inherent to the platform </li></ul></ul><ul><ul><li>Painful to embed in Flash sites </li></ul></ul><ul><ul><li>Graphical/data streaming limitations </li></ul></ul><ul><ul><li>How does it work? </li></ul></ul><ul><ul><li>Lets you write code in Actionscript3, compile it against our interface library, and output a SWF containing an interactive Google Map </li></ul></ul><ul><ul><li>SWF can be embedded on your web page, Google Earth, MySpace, etc </li></ul></ul><ul><ul><li>The Flash API has all the main functionality of the Javascript API </li></ul></ul>Solution: Flash Maps API
    33. 33. Flash API: Examples (1) <ul><ul><li>3. Smoother video/animation </li></ul></ul><ul><ul><li>Flash animation is native and smooth </li></ul></ul><ul><ul><li>Example: Google Map Driving Simulator ( Converted from JS: Doubled frame-rate, halved CPU usage ) </li></ul></ul><ul><ul><li>1. Better/more Vector Graphics </li></ul></ul><ul><ul><li>Flash handles vector graphics natively </li></ul></ul><ul><ul><li>Example: Thematic Mapping </li></ul></ul><ul><ul><li>2. Rotatable maps </li></ul></ul><ul><ul><li>Map is rendered as a sprite, rotatable in Flash </li></ul></ul><ul><ul><li>Example: Spinning Map </li></ul></ul>
    34. 34. 3D Flash Maps http://googlegeodevelopers.blogspot.com/2009/07/3d-perspective-in-maps-api-for-flash.html New!
    35. 35. Flash API in 3D: Two lines of code... <ul><ul><li>Replace ‘Map’ with Map3D </li></ul></ul><ul><ul><li>Turn on perspective </li></ul></ul><ul><ul><li>Add a navigation control </li></ul></ul>Map3D.viewMode = View.VIEWMODE_PERSPECTIVE; addControl(NavigationControl);
    36. 36. Reverse Geocoding <ul><ul><li>We have offered geocoding of addresses for a long time </li></ul></ul><ul><ul><li>Standard geocoding converts an address into a latitude and longitude pair </li></ul></ul><ul><ul><li>But what happens when you want to find the address of a point on the map? </li></ul></ul>Solution: Reverse geocoding (new!) geocoder.getLocations(latlng, function(addresses) { if(addresses.Status.code != 200) { alert(&quot;reverse geocoder failed to find an address for &quot; + latlng.toUrlValue()); } else { var result = addresses.Placemark[0]; map.openInfoWindow(latlng, result.address); } }); <ul><ul><li>Instead of an address, pass a lat/long to the GeoCoder </li></ul></ul>Example: MeetWays.com Javascript Key: CSS HTML
    37. 37. Wikipedia and Panoramio Layers <ul><ul><li>In May, we added two new layers to Google Maps </li></ul></ul><ul><ul><li>Panoramio layer shows geo-coded user-submitted photos </li></ul></ul><ul><ul><li>Wikipedia layer plots geo-coded articles </li></ul></ul><ul><ul><li>Example Wikipedia and Panoramio implementation </li></ul></ul><ul><ul><li>You can add these layers to your API implementation with just 2 lines of code </li></ul></ul>map.addOverlay(new GLayer(&quot;com.panoramio.all&quot;)); map.addOverlay(new GLayer(&quot;org.wikipedia.en&quot;)); <ul><ul><li>There are localised versions of the Wikipedia layer available in many languages </li></ul></ul>Javascript Key: CSS HTML
    38. 38. Street View Service: Introduction <ul><li>Coverage </li></ul><ul><ul><li>Areas covered includes 70% of the USA, Canada, Australia, New Zealand, United Kingdom, Czech Republic, France, Italy Netherlands, Portugal, Spain, Switzerland, Japan, Taiwan, ... </li></ul></ul><ul><ul><li>South Africa coming in 2010 </li></ul></ul><ul><li>Street View API </li></ul><ul><ul><li>Google Maps API provides a service for obtaining and manipulating Street View imagery </li></ul></ul><ul><ul><li>Street View uses Flash to display these interactive images </li></ul></ul><ul><ul><li>Street View provides panoramic 360 degree street-level views in certain areas within the Google Maps coverage </li></ul></ul>
    39. 39. Street View Service: Examples <ul><li>Google Maps Directions (Print View) </li></ul><ul><li>( http://maps.google.com/ ) </li></ul><ul><ul><li>Printable directions show Street View panorama of each junction, to aid recognition </li></ul></ul><ul><ul><li>Prior to printing, panoramas may be rotated by the viewer as desired </li></ul></ul><ul><li>Trulia Real Estate listings </li></ul><ul><li>( http://www.trulia.com/ ) </li></ul><ul><ul><li>Street View panorama shows exterior view of properties for sale </li></ul></ul><ul><ul><li>User can click arrows to ‘walk’ around neighbourhood </li></ul></ul>
    40. 40. Street View Service: Adding SV to a page Javascript Key: CSS HTML location = new GLatLng(40.754501,-73.984358); myPOV = { yaw:370, pitch:-20 }; svOpts = { latlng:location, pov:myPOV }; <ul><ul><li>2. Initialise panorama variables </li></ul></ul>var myPano = new GStreetviewPanorama(document.getElementById('pano')); myPano.setLocationAndPOV(location, svOpts); <ul><ul><li>3. Create and initialise the panorama object </li></ul></ul>GEvent.addListener(myPano, 'error', handleNoFlash); function handleNoFlash(errorCode) { if (errorCode == 603) { alert('Error: Flash is not supported by your browser'); return; } } <ul><ul><li>4. Handle unsupported browsers </li></ul></ul>#pano { height:200px; width:200px; border:1px solid grey; } <ul><ul><li>1. CSS / HTML: Define a Street View container </li></ul></ul><div id='pano'></div>
    41. 41. Street View Service: Updating from map clicks Javascript Key: CSS HTML panoClient = new GStreetviewClient(); <ul><ul><li>1. Initialise panorama client variable </li></ul></ul>GEvent.addListener(map, 'click', function(overlay, latlng) { panoClient.getNearestPanorama(latlng, showPanoData); }); <ul><ul><li>2. Grab coordinates of map clicks </li></ul></ul>function showPanoData(panoData) { myPano.setLocationAndPOV(panoData.location.latlng); } <ul><ul><li>3. Update Street View panorama </li></ul></ul>
    42. 42. Earth API: Introduction <ul><ul><li>Google Earth is a powerful 3D mapping tool that, until this year, required users to download a dedicated app </li></ul></ul><ul><ul><li>Requires a degree of technical expertise and suitable permissions </li></ul></ul><ul><ul><li>Could not be tightly integrated with web content </li></ul></ul><ul><ul><li>How does it work? </li></ul></ul><ul><ul><li>Users download a plugin the first time they use (currently available only for Windows; Mac and Linux versions coming) </li></ul></ul><ul><ul><li>If users do not have the plugin, implementations can gracefully degrade to a 2D Maps implementation </li></ul></ul><ul><ul><li>When to use? </li></ul></ul><ul><ul><li>Applications benefiting from a 3D geographic perspective </li></ul></ul><ul><ul><li>Option to integrate 3D buildings modelled in SketchUp </li></ul></ul>Solution: The Google Earth API allows Google Earth to be embedded in a website, with no requirement to launch the app
    43. 43. Earth API: Examples <ul><li>1) Ships </li></ul><ul><li>http://ships1.planetinaction.com/ </li></ul><ul><li>Take the driving seat of a supertanker </li></ul><ul><li>Explore the world! </li></ul><ul><li>2) Monster Milktruck </li></ul><ul><li>http://www.google.com/earth/plugin/examples/milktruck/ </li></ul><ul><li>3D driving game </li></ul><ul><li>Jump anywhere on the Earth’s surface </li></ul>
    44. 44. Earth API: Adding a 3D map to a page Javascript Key: CSS HTML <script type='text/javascript' src='http://www.google.com/jsapi?key=ABCDEFG'> <script>google.load('earth', '1');</script> <ul><ul><li>2. Use the Google AJAX API Loader </li></ul></ul>#map3d { height:400px; width:400px; border:1px solid grey; } <ul><ul><li>1. CSS / HTML: Define a map container </li></ul></ul><div id='map3d'></div> function init() { geocoder = new GClientGeocoder(); google.earth.createInstance('map3d', initCB, failureCB); } function initCB(object) { ge = object; ge.getWindow().setVisibility(true); } function failureCB(object) { alert('load failed'); } <ul><ul><li>3. Initialise the Earth container </li></ul></ul>
    45. 45. Earth API: Setting the view (1) Javascript Key: CSS HTML var lat = 51.5; var lng = 0; var altitude = 100; var tilt = 0; var heading = 45; var range = 1000; <ul><ul><li>1. Define view variables </li></ul></ul>
    46. 46. Earth API: Setting the view (2) Javascript Key: CSS HTML var la = ge.createLookAt(''); la.set(lng, lat, altitude, ge.ALTITUDE_RELATIVE_TO_GROUND, tilt, heading, range); ge.getView().setAbstractView(la); <ul><ul><li>2. Set the view </li></ul></ul>
    47. 47. Earth API: Tips and tricks <ul><ul><li>3D Maps can be combined with 2D maps, for graceful degradation if the user does not have the plugin installed </li></ul></ul>Javascript Key: CSS HTML map.addMapType(G_SATELLITE_3D_MAP); <ul><ul><li>1. Add a 3D map type </li></ul></ul>map.getEarthInstance(getEarthInstanceCB); var ge; function getEarthInstanceCB(object) { ge = object; } <ul><ul><li>2. Obtain a pointer to the Earth instance </li></ul></ul>map.setMapType(G_SATELLITE_3D_MAP); <ul><ul><li>3. Switch to 3D map type </li></ul></ul>
    48. 48. Bringing it all together <ul><li>Google Earth Driving Simulator </li></ul><ul><li>http://earth-api-samples.googlecode.com/svn/trunk/demos/drive-simulator/ </li></ul><ul><li>Directions </li></ul><ul><ul><li>Construct directions from point A to point B </li></ul></ul><ul><li>Google Earth API </li></ul><ul><ul><li>View route driven in 3D </li></ul></ul><ul><ul><li>Set start / end points and speed </li></ul></ul><ul><li>Google Maps </li></ul><ul><ul><li>Track progress in 2D Maps pane </li></ul></ul>
    49. 49. Coming next.... <ul><li>Google Maps v3 </li></ul><ul><li>Looks similar to the existing version 2 of the Google Maps API - however, much has changed under the hood </li></ul><ul><li>Uses new MVC architecture to load fast, especially on mobile </li></ul><ul><li>The initial launch has a smaller feature set than that available in the V2 API </li></ul><ul><li>Beta available now and launches in 2010 </li></ul>
    50. 50. Have fun! <ul><li>Lots more developer resources online... </li></ul><ul><li>AJAX API Playground </li></ul><ul><ul><li>http://code.google.com/apis/ajax/playground/ </li></ul></ul><ul><li>Geo Developers Blog </li></ul><ul><ul><li>http://googlegeodevelopers.blogspot.com/ </li></ul></ul><ul><li>Google Code </li></ul><ul><ul><li>http://code.google.com/ </li></ul></ul>

    ×