Google Mapy (Jaroslav Bengl)

Google Maps API Jarda Bengl Product Manager Maps EMEA

Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Google Maps 101: Adding a map to your page Javascript Key: CSS HTML #map { height:400px; width:400px; border:1px solid grey; } ,[object Object],<div id='map'></div> map.addControl(new GLargeMapControl()); map.addControl(new GHierarchicalMapTypeControl()); ,[object Object],var lat = 51.49494; var lng = -0.14657; var initialzoom = 17; map.setCenter(new GLatLng(lat, lng),initialzoom); ,[object Object],var map = new GMap2(document.getElementById('map')); ,[object Object],<script type='text/javascript' src='http://www.google.com/jsapi?key=ABCDEFG'> <script>google.load('maps', '2.x');</script> ,[object Object]

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'> ,[object Object],<script>google.load('maps', '2.x');</script> ,[object Object],[object Object],[object Object],[object Object],<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)); ,[object Object],GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml('<h1>London Googleplex</h1><p>Welcome!</p>'); }); ,[object Object],map.addOverlay(marker); ,[object Object]

Google Maps 101: Adding a line Javascript Key: CSS HTML var latOffset = 0.001; var lngOffset = 0.001; ,[object Object],var line = new GPolyline([new GLatLng(lat, lng-lngOffset), new GLatLng(lat, lng+lngOffset)]); ,[object Object],map.addOverlay(line); ,[object Object]

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); ,[object Object],map.addOverlay(polygon); ,[object Object]

Google Maps 101 : Geocoding an address Javascript Key: CSS HTML var address1 = '1 Strand, London'; ,[object Object],var geocoder = new GClientGeocoder(); ,[object 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>'); }); ,[object Object]

Google Maps 101 : Directions Javascript Key: CSS HTML #directions { width:400px;} ,[object Object],<div id = 'directions'></div> Live Demo gdir = new GDirections(map,directions); ,[object Object],gdir.load('from: ' + address1 + ' to: ' + address2); ,[object Object],address2 = '76 Buckingham Palace Road, London' ,[object Object],gdir.load('from: ' + address1 + ' to: ' + address2, {travelMode:G_TRAVEL_MODE_WALKING}); ,[object Object]

Sharing Geo data between applications Using KML

KML: Introduction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

KML: Placemarks <?xml version='1.0' encoding='UTF-8'?> <kml xmlns='http://www.opengis.net/kml/2.2'> <Placemark> </kml> Headers ,[object Object],<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> ,[object Object],<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 ,[object Object],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 ,[object Object],<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 ,[object Object],[object Object],var kml = new GGeoXml('http://mydomain.com/myfile.kml'); map.addOverlay(kml) Javascript Key: CSS HTML ,[object Object],[object Object],2. Display it in Google Maps for Mobile ,[object Object],3. Display it in Google Earth ,[object Object],[object Object],[object Object]

KML: Submit it to Google! ,[object Object],[object Object],<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 ,[object Object]

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 ,[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],map.enableGoogleBar(); Javascript Key: CSS HTML

Static Maps API: Introduction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Solution: The Static Maps API reduces load time by displaying a static image, rather than the full Javascript Maps interface ,[object Object]

Static Maps API: Examples ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Static Maps API: Implementation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Static Maps API: Tips and tricks ,[object Object],[object Object],[object Object],[object Object],[object Object]

Location Detection: Introduction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Solution: Automatic location detection in the AJAX API

Location Detection: Implementation map.setCenter(lat,lng); ,[object Object],Javascript Key: CSS HTML if (google.loader.ClientLocation) { var lat = google.loader.ClientLocation.latitude; var lng = google.loader.ClientLocation.longitude; } ,[object Object],else { var lat = 51.0; var lng = 0.0; } ,[object Object],ClientLocation.address.city ClientLocation.address.country ClientLocation.address.country_code ClientLocation.address.region ,[object Object]

Custom Tile Layers: Introduction ,[object Object],[object Object],[object Object],[object Object],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 ) ,[object Object],[object Object],[object Object]

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; }; ,[object Object],var pic_customMap = new GMapType(pic_tileLayers, new GMercatorProjection(4),'Pic',{maxResolution:3, minResolution:0}); ,[object Object],map = new GMap2(map,{mapTypes:[pic_customMap]}); map.setCenter(new GLatLng(centreLat, centreLon), initialZoom,pic_customMap); ,[object Object],#map { height:400px; width:400px; border:1px solid grey; } ,[object Object],<div id='map'></div>

Custom Tile Layers: Implementation (2) Javascript Key: CSS HTML ,[object Object],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' } ,[object Object]

Flash API: Introduction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Solution: Flash Maps API

Flash API: Examples (1) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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... ,[object Object],[object Object],[object Object],Map3D.viewMode = View.VIEWMODE_PERSPECTIVE; addControl(NavigationControl);

Reverse Geocoding ,[object Object],[object Object],[object Object],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); } }); ,[object Object],Example: MeetWays.com Javascript Key: CSS HTML

Wikipedia and Panoramio Layers ,[object Object],[object Object],[object Object],[object Object],[object Object],map.addOverlay(new GLayer("com.panoramio.all")); map.addOverlay(new GLayer("org.wikipedia.en")); ,[object Object],Javascript Key: CSS HTML

Street View Service: Introduction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Street View Service: Examples ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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 }; ,[object Object],var myPano = new GStreetviewPanorama(document.getElementById('pano')); myPano.setLocationAndPOV(location, svOpts); ,[object Object],GEvent.addListener(myPano, 'error', handleNoFlash); function handleNoFlash(errorCode) { if (errorCode == 603) { alert('Error: Flash is not supported by your browser'); return; } } ,[object Object],#pano { height:200px; width:200px; border:1px solid grey; } ,[object Object],<div id='pano'></div>

Street View Service: Updating from map clicks Javascript Key: CSS HTML panoClient = new GStreetviewClient(); ,[object Object],GEvent.addListener(map, 'click', function(overlay, latlng) { panoClient.getNearestPanorama(latlng, showPanoData); }); ,[object Object],function showPanoData(panoData) { myPano.setLocationAndPOV(panoData.location.latlng); } ,[object Object]

Earth API: Introduction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Solution: The Google Earth API allows Google Earth to be embedded in a website, with no requirement to launch the app

Earth API: Examples ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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> ,[object Object],#map3d { height:400px; width:400px; border:1px solid grey; } ,[object Object],<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'); } ,[object Object]

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; ,[object Object]

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); ,[object Object]

Earth API: Tips and tricks ,[object Object],Javascript Key: CSS HTML map.addMapType(G_SATELLITE_3D_MAP); ,[object Object],map.getEarthInstance(getEarthInstanceCB); var ge; function getEarthInstanceCB(object) { ge = object; } ,[object Object],map.setMapType(G_SATELLITE_3D_MAP); ,[object Object]

Bringing it all together ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Coming next.... ,[object Object],[object Object],[object Object],[object Object],[object Object]

Have fun! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Google Mapy (Jaroslav Bengl)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Google Mapy (Jaroslav Bengl)

Ähnlich wie Google Mapy (Jaroslav Bengl) (20)

Mehr von Jiří Šmída

Mehr von Jiří Šmída (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Google Mapy (Jaroslav Bengl)

Hinweis der Redaktion