Google Mapy (Jaroslav Bengl)

Google Maps API Jarda Bengl Product Manager Maps EMEA

Agenda
Maps API 101
Sharing Geo data between applications (using KML)
Cool features
Local Search
Static Maps
Location Detection
Custom Tile Layers
Flash API
Reverse Geocoding
Wikipedia and Panoramio Layers
Street View
Earth API

Maps API 101 The crash course

Google Maps 101: Adding a map to your page Javascript Key: CSS HTML #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
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 Maps 101: A note on the AJAX loader Javascript Key: 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 Maps 101: Adding a marker Javascript Key: CSS HTML var marker = new GMarker(new GLatLng(lat, lon));
1. Initialise the marker
GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml('<h1>London Googleplex</h1><p>Welcome!</p>'); });
2. Make a bubble pop up when clicked
map.addOverlay(marker);
3. Display the marker

Google Maps 101: Adding a line Javascript Key: CSS HTML 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

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);
1. Create the polygon and set line / fill properties
map.addOverlay(polygon);
2. Display the polygon

Google Maps 101 : Geocoding an address Javascript Key: CSS HTML 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

Google Maps 101 : Directions Javascript Key: CSS HTML #directions { width:400px;}
1. CSS / HTML: Define a text directions container
<div id = 'directions'></div> Live Demo gdir = new GDirections(map,directions);
3. Create the GDirections object
gdir.load('from: ' + address1 + ' to: ' + address2);
4. Compute and display the directions
address2 = '76 Buckingham Palace Road, London'
2. Define the address(es) to be geocoded
gdir.load('from: ' + address1 + ' to: ' + address2, {travelMode:G_TRAVEL_MODE_WALKING});
Note: to show walking directions, use

Sharing Geo data between applications Using KML

KML: Introduction
Keyhole Markup Language (KML) is an XML-based language for expressing geographic annotation and visualization
Developed 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 views
Each 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

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 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

KML: Paths <LineString> <Placemark>
Now 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

KML: Styles Style definition
Finally, 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

KML: Network links Folder definition
Network 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/ <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)

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
var kml = new GGeoXml('http://mydomain.com/myfile.kml'); map.addOverlay(kml) Javascript Key: CSS HTML
Can also view by pasting the URL into the Maps Search box
The KML Generator is a great way to learn
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

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
<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

Cool features Local Search Static Maps Location Detection Custom Tile Layers Flash API Reverse Geocoding Wikipedia and Panoramio Layers Street View Earth API

Local Search: Introduction
Many map developers want to let users easily search for businesses
The Local Search API lets you do this, but requires lots of implementation
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("New York, NY"); searchControl.draw(document.getElementById("searchcontrol")); searchControl.execute(“Pizza Johannesburg"); } google.setOnLoadCallback(OnLoad); Initialize Set center point Display

Local Search: GoogleBar The 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(); Javascript Key: CSS HTML

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
The Static Maps API can be combined with the Javascript API for a better user experience

Static Maps API: Examples
1) Lonely Planet Mobile ( http://m.lonelyplanet.com/ )
Displays static map of current user location
Plots 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 incidents
Collects input from mobile users

Static Maps API: Implementation
Good news! Just add an <img> tag pointing to a well-crafted URL
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'>
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

Static Maps API: Tips and tricks
The Static Maps API can be combined with the Javascript API for 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 )

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 API

Location Detection: Implementation map.setCenter(lat,lng);
3. Centre the map
Javascript Key: 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.city ClientLocation.address.country ClientLocation.address.country_code ClientLocation.address.region
You can also access:

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
Map Cruncher allows users to add alternative map imagery as an overlay One Prague Map charts house prices Another charts beer prices

Custom Tile Layers: Example Kremer Collection Photography ( www.thekremercollection.com )
Map navigator and zoom level control
Content copyright notice
Orientation navigator

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; };
2. Create a custom picture layer
var pic_customMap = new GMapType(pic_tileLayers, new GMercatorProjection(4),'Pic',{maxResolution:3, minResolution:0});
3. Define a new map type
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; }
<div id='map'></div>

Custom Tile Layers: Implementation (2) Javascript Key: CSS HTML
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
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)

Flash API: Introduction
The Javascript API has limitations inherent to the platform
Painful to embed in Flash sites
Graphical/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 Map
SWF can be embedded on your web page, Google Earth, MySpace, etc
The Flash API has all the main functionality of the Javascript API
Solution: Flash Maps API

Flash API: Examples (1)
3. Smoother video/animation
Flash animation is native and smooth
Example: Google Map Driving Simulator ( Converted from JS: Doubled frame-rate, halved CPU usage )
1. Better/more Vector Graphics
Flash handles vector graphics natively
Example: Thematic Mapping
2. Rotatable maps
Map is rendered as a sprite, rotatable in Flash
Example: Spinning Map

3D Flash Maps http://googlegeodevelopers.blogspot.com/2009/07/3d-perspective-in-maps-api-for-flash.html New!

Flash API in 3D: Two lines of code...
Replace ‘Map’ with Map3D
Turn on perspective
Add a navigation control
Map3D.viewMode = View.VIEWMODE_PERSPECTIVE; addControl(NavigationControl);

Reverse Geocoding
We have offered geocoding of addresses for a long time
Standard geocoding converts an address into a latitude and longitude pair
But what happens when you want to find the address of a point on the map?
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.com Javascript Key: CSS HTML

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 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
Javascript Key: CSS HTML

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 views in certain areas within the Google Maps coverage

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

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 };
2. Initialise panorama variables
var myPano = new GStreetviewPanorama(document.getElementById('pano')); myPano.setLocationAndPOV(location, svOpts);
3. Create and initialise the panorama object
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>

Street View Service: Updating from map clicks Javascript Key: CSS HTML 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

Earth API: Introduction
Google Earth is a powerful 3D mapping tool that, until this year, required users to download a dedicated app
Requires a degree of technical expertise and suitable permissions
Could 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 perspective
Option 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

Earth API: Examples
1) Ships
http://ships1.planetinaction.com/
Take the driving seat of a supertanker
Explore the world!
2) Monster Milktruck
http://www.google.com/earth/plugin/examples/milktruck/
3D driving game
Jump anywhere on the Earth’s surface

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>
2. Use the Google AJAX API Loader
#map3d { height:400px; width:400px; border:1px solid grey; }
<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'); }
3. Initialise the Earth container

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;
1. Define view variables

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);
2. Set the view

Earth API: Tips and tricks
3D Maps can be combined with 2D maps, for graceful degradation if the user does not have the plugin installed
Javascript Key: CSS HTML 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

Bringing it all together
Google Earth Driving Simulator
http://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

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

Have fun!
Lots more developer resources online...
AJAX API Playground
http://code.google.com/apis/ajax/playground/
Geo Developers Blog
http://googlegeodevelopers.blogspot.com/
Google Code
http://code.google.com/

http://gisday.tul.cz	47
http://www.slideshare.net	20
http://a0.twimg.com	2

Google Mapy (Jaroslav Bengl)

by Jiří Šmída on Nov 10, 2009

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 69

Statistics

Google Mapy (Jaroslav Bengl) Presentation Transcript