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