Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Barcamp GoogleMaps - praktické ukázky kódu

1,289 views

Published on

Published in: Technology, News & Politics

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

×