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.
Miloš Lenoch

         @MilosLenoch
milos.lenoch@NejRemeslnici.cz
GoogleMaps
Meshups
Zdarmo pro otevřený web
      (web který je zdarma pro uživatele)
      Google může stanovit limit přij...
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());...
GDirections
   var directions = new GDirections(map, 
       $("#directions").get(0)); 
directions.loadFromWaypoints([me.z...
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...
Resources

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

http://code.google.com/events/io/2009/sessions/
...
Miloš Lenoch

         @MilosLenoch
milos.lenoch@NejRemeslnici.cz
Nächste SlideShare
Wird geladen in …5
×

Barcamp GoogleMaps - praktické ukázky kódu

1.290 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie, News & Politik

Barcamp GoogleMaps - praktické ukázky kódu

  1. 1. Miloš Lenoch @MilosLenoch milos.lenoch@NejRemeslnici.cz
  2. 2. GoogleMaps 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. Move & Listen GEvent.addListener(marker,"mouseup",function(){ $("#location").html(marker.getPoint().toString()); });   http://jsbin.com/ecavi/edit
  9. 9. 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
  10. 10. 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”
  11. 11. Performace, Clustering GMarket = 5*<img> + 1 map = need for Clustering 360cities.net MarketCluster (open source library pure JS) Maptimize - hosted solution 360cities.net
  12. 12. Resources 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/
  13. 13. Miloš Lenoch @MilosLenoch milos.lenoch@NejRemeslnici.cz

×