Google Maps Unicorn College GUG.cz
•Télécharger en tant que KEY, PDF•
2 j'aime•1,728 vues
Practical experience with Google Maps, code samples in jsbin, inspiring speakers. Presentation at Unicorn College GUG.cz event.
Recommandé
Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
Google Maps Unicorn College GUG.cz
- 1. Unicorn College GUG.cz Miloš Lenoch @MilosLenoch milos.lenoch@NejRemeslnici.cz
- 2. GoogleMaps Inspiration, design & startup
- 3. Program Meshups Zdarmo pro otevřený web (web který je zdarma pro uživatele) Google může stanovit limit přijatých požadavků Bez reklam (Google smí změnit) API jednoduché použití Používáme a máme velmi dobré zkušenosti Praktický příklad Javascript kodu v JSBIN (+jQuery) můžete si sami vyrobit widget, který ukáže cestu k vám
- 4. Just a map <script src="http://maps.google.com/maps? file=api&v=2&sensor=false&key=ABQIAAAA5Ai_wzkroeS0BJpu0jS5R BTWx8njL9qYLnq46LoOVGM6mIGTuxSbyNBw2dNLymw9CgsIdzKqIZ9iUg"></script> <script type="text/javascript"> $(function(){ var map = new GMap2($("#gmap").get(0)); map.setCenter(new GLatLng(49.3268, 17.9966), 12); }); </script> http://jsbin.com/ohexa3/edit
- 5. GMarker function createMarker(point){ var marker = new GMarker(point); return marker; } var location = new GLatLng(49.3268, 17.9966); map.addOverlay(createMarker(location)); http://jsbin.com/iqexe/edit
- 6. Tiny bit of jQuery $("#zip_code").keyup(function(){ var code = $(this).val().replace(/s/g, '').match(/^d{5}$/); if(code){ $("#message").html(code[0]). animate( { fontSize:"32px"}, 500 ). animate( { fontSize:"16px"}, 500 ); } }); http://jsbin.com/uzoru/edit
- 7. Geocoder var geocoder = new GClientGeocoder(); geocoder.setBaseCountryCode('cz'); geocoder.getLocations(zip, function(locations){ if(locations.Status.code === 200){ var p = locations.Placemark[0].Point; var loc = new GLatLng(p.coordinates[1], p.coordinates[0]); http://jsbin.com/agede/edit
- 8. GLatLngBounds + zoom me.bounds_cache = new GLatLngBounds(); me.bounds_cache.extend(loc); map.setCenter(bounds.getCenter()); var z = map.getBoundsZoomLevel(bounds); http://jsbin.com/irahe/edit
- 9. Move & Listen GEvent.addListener(marker,"mouseup",function(){ $("#location").html(marker.getPoint().toString()); }); http://jsbin.com/ecavi/edit
- 10. Draw polygon var points = [marker.getPoint(), ......, startPoint]; var square = new GPolygon(points,"#0055ff",2, null,"#0055ff",null); map.addOverlay(square); • http://jsbin.com/ecavi/3/edit
- 11. GDirections var directions = new GDirections(map, $("#directions").get(0)); directions.loadFromWaypoints([me.zips[me.anchor], loc]); <body> .... <div id="directions"></div> </body> http://jsbin.com/ubova/edit
- 12. Snippet: Scrolling tricks http://jsbin.com/ecavi/7/edit Polygons in Maps when scrolled using FIXED position works only in FF for others (Safari, Chrome, IE) slower JS scrolling is needed
- 13. Performance 1. z-index nelze modifikovat 2. GPolygon je poměrně pomalý (kružnice = 60 úseček) - lightweight solution http://polygonzo.googlecode.com/ svn/trunk/code/test.html - using canvas 3. Async load of GoogleMaps “AJAX API Loader”
- 14. Performace, Clustering GMarket = 5*<img> + 1 map = need for Clustering 360cities.net MarketCluster (open source library pure JS) Maptimize - hosted solution 360cities.net
- 15. More Resources on Maps http://code.google.com/apis/maps/documentation/reference.html http://code.google.com/events/io/2009/sessions/ PerformanceTipsGeoApiMashups.html http://code.google.com/apis/ajax/playground/
- 16. Inspiration, design & startup Jeff Jarvis - What Would Google DO? http://bit.ly/cJqrtL 5:10 - 7:00 9:28 - 14:20 Dan Ariely - Predictably irrational http://bit.ly/aNKunK 4:55 - 9:30 STARTUP Guy Kawasaki - The Art of the Start http://bit.ly/cXQnBL 33:35 - end
- 17. Miloš Lenoch @MilosLenoch milos.lenoch@NejRemeslnici.cz