Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

Google Maps Unicorn College GUG.cz

3.722 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, News & Politik
  • Als Erste(r) kommentieren

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

×