Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Unicorn College GUG.cz
         Miloš Lenoch

           @MilosLenoch
  milos.lenoch@NejRemeslnici.cz
GoogleMaps



             Inspiration, design & startup
Program
Meshups
Zdarmo pro otevřený web
      (web který je zdarma pro uživatele)
      Google může stanovit limit přijatý...
Just a map
    <script src="http://maps.google.com/maps?
    file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA5Ai_wzkroeS...
GMarker
    function createMarker(point){
      var marker = new GMarker(point);
      return marker;
    }

    var locat...
Tiny bit of jQuery
    $("#zip_code").keyup(function(){
      var code = $(this).val().replace(/s/g, '').match(/^d{5}$/);
...
Geocoder
    var geocoder = new GClientGeocoder();
            geocoder.setBaseCountryCode('cz');
            geocoder.get...
GLatLngBounds + zoom
    me.bounds_cache = new GLatLngBounds();
    me.bounds_cache.extend(loc);
    map.setCenter(bounds....
Move & Listen
    GEvent.addListener(marker,"mouseup",function(){
      $("#location").html(marker.getPoint().toString());...
Draw polygon
    var points = [marker.getPoint(), ......, startPoint];
    var square = new GPolygon(points,"#0055ff",2,
 ...
GDirections
   var directions = new GDirections(map, 
       $("#directions").get(0)); 
directions.loadFromWaypoints([me.z...
Snippet:
               Scrolling tricks
http://jsbin.com/ecavi/7/edit

Polygons in Maps when scrolled using FIXED positio...
Performance
1. z-index nelze modifikovat
2. GPolygon je poměrně pomalý (kružnice = 60 úseček)
- lightweight solution http:...
Performace, Clustering
GMarket = 5*<img> + 1 map
= need for Clustering
360cities.net
MarketCluster (open source library pu...
More Resources on Maps

http://code.google.com/apis/maps/documentation/reference.html

http://code.google.com/events/io/20...
Inspiration, design & startup

Jeff Jarvis - What Would Google DO?
http://bit.ly/cJqrtL
5:10  - 7:00
9:28 - 14:20

Dan Ari...
Miloš Lenoch

         @MilosLenoch
milos.lenoch@NejRemeslnici.cz
Prochain SlideShare
Chargement dans…5
×

Google Maps Unicorn College GUG.cz

3 723 vues

Publié le

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

  • Soyez le premier à commenter

Google Maps Unicorn College GUG.cz

  1. 1. Unicorn College GUG.cz Miloš Lenoch @MilosLenoch milos.lenoch@NejRemeslnici.cz
  2. 2. GoogleMaps Inspiration, design & startup
  3. 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. 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. 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. 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. 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. 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. 9. Move & Listen GEvent.addListener(marker,"mouseup",function(){ $("#location").html(marker.getPoint().toString()); });   http://jsbin.com/ecavi/edit
  10. 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. 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. 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. 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. 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. 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. 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. 17. Miloš Lenoch @MilosLenoch milos.lenoch@NejRemeslnici.cz

×