Google Maps Unicorn College GUG.cz

  • 3,073 views
Uploaded on

Practical experience with Google Maps, code samples in jsbin, inspiring speakers. Presentation at Unicorn College GUG.cz event.

Practical experience with Google Maps, code samples in jsbin, inspiring speakers. Presentation at Unicorn College GUG.cz event.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,073
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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&amp;v=2&amp;sensor=false&amp;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