SlideShare a Scribd company logo
1 of 13
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ř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
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
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
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
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
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
Move & Listen
    GEvent.addListener(marker,"mouseup",function(){
      $("#location").html(marker.getPoint().toString());
    });

 
    http://jsbin.com/ecavi/edit
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
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”
Performace, Clustering
GMarket = 5*<img> + 1 map
= need for Clustering
360cities.net
MarketCluster (open source library pure JS)

Maptimize
- hosted solution




                                     360cities.net
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/
Miloš Lenoch

         @MilosLenoch
milos.lenoch@NejRemeslnici.cz

More Related Content

What's hot

Build 2016 - P529 - Spatial Data Management and Visualization with Bing Maps
Build 2016 - P529 - Spatial Data Management and Visualization with Bing MapsBuild 2016 - P529 - Spatial Data Management and Visualization with Bing Maps
Build 2016 - P529 - Spatial Data Management and Visualization with Bing MapsWindows Developer
 
Tilting Google Maps and MissileLauncher
Tilting Google Maps and MissileLauncherTilting Google Maps and MissileLauncher
Tilting Google Maps and MissileLauncherTatsuhiko Miyagawa
 
סרג' קרול
סרג' קרולסרג' קרול
סרג' קרולNetcraft
 
Mobile Application Development for the Web Developer
Mobile Application Development for the Web DeveloperMobile Application Development for the Web Developer
Mobile Application Development for the Web DeveloperCraig Johnston
 
Ass day2 1_checkerboard...copy in cpp
Ass day2 1_checkerboard...copy in cppAss day2 1_checkerboard...copy in cpp
Ass day2 1_checkerboard...copy in cppRobi Parvez
 
GeoTechTalk InkSatogaeri Project
GeoTechTalk InkSatogaeri ProjectGeoTechTalk InkSatogaeri Project
GeoTechTalk InkSatogaeri ProjectKentaro Ishimaru
 
UIWebViewでつくるUI
UIWebViewでつくるUIUIWebViewでつくるUI
UIWebViewでつくるUIcocopon
 
Having fun with graphs, a short introduction to D3.js
Having fun with graphs, a short introduction to D3.jsHaving fun with graphs, a short introduction to D3.js
Having fun with graphs, a short introduction to D3.jsMichael Hackstein
 
The Australian-The Deal Magazine
The Australian-The Deal MagazineThe Australian-The Deal Magazine
The Australian-The Deal Magazinedrocallaghan
 
ARTDM 170, Week13: Processing
ARTDM 170, Week13: ProcessingARTDM 170, Week13: Processing
ARTDM 170, Week13: ProcessingGilbert Guerrero
 
Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLLeaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLgerbille
 
An Impromptu Introduction to HTML5 Canvas
An Impromptu Introduction to HTML5 CanvasAn Impromptu Introduction to HTML5 Canvas
An Impromptu Introduction to HTML5 CanvasBen Hodgson
 
言語の設計判断
言語の設計判断言語の設計判断
言語の設計判断nishio
 

What's hot (20)

Build 2016 - P529 - Spatial Data Management and Visualization with Bing Maps
Build 2016 - P529 - Spatial Data Management and Visualization with Bing MapsBuild 2016 - P529 - Spatial Data Management and Visualization with Bing Maps
Build 2016 - P529 - Spatial Data Management and Visualization with Bing Maps
 
script
scriptscript
script
 
Tilting Google Maps and MissileLauncher
Tilting Google Maps and MissileLauncherTilting Google Maps and MissileLauncher
Tilting Google Maps and MissileLauncher
 
Efek daun
Efek daunEfek daun
Efek daun
 
Script
ScriptScript
Script
 
Task 6
Task 6Task 6
Task 6
 
סרג' קרול
סרג' קרולסרג' קרול
סרג' קרול
 
CakePHP in iPhone App
CakePHP in iPhone AppCakePHP in iPhone App
CakePHP in iPhone App
 
Mobile Application Development for the Web Developer
Mobile Application Development for the Web DeveloperMobile Application Development for the Web Developer
Mobile Application Development for the Web Developer
 
Ass day2 1_checkerboard...copy in cpp
Ass day2 1_checkerboard...copy in cppAss day2 1_checkerboard...copy in cpp
Ass day2 1_checkerboard...copy in cpp
 
GeoTechTalk InkSatogaeri Project
GeoTechTalk InkSatogaeri ProjectGeoTechTalk InkSatogaeri Project
GeoTechTalk InkSatogaeri Project
 
UIWebViewでつくるUI
UIWebViewでつくるUIUIWebViewでつくるUI
UIWebViewでつくるUI
 
Having fun with graphs, a short introduction to D3.js
Having fun with graphs, a short introduction to D3.jsHaving fun with graphs, a short introduction to D3.js
Having fun with graphs, a short introduction to D3.js
 
The Australian-The Deal Magazine
The Australian-The Deal MagazineThe Australian-The Deal Magazine
The Australian-The Deal Magazine
 
ARTDM 170, Week13: Processing
ARTDM 170, Week13: ProcessingARTDM 170, Week13: Processing
ARTDM 170, Week13: Processing
 
FSB Get On Google October 2014
FSB Get On Google October 2014FSB Get On Google October 2014
FSB Get On Google October 2014
 
Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLLeaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGL
 
Ruby haskell extension
Ruby haskell extensionRuby haskell extension
Ruby haskell extension
 
An Impromptu Introduction to HTML5 Canvas
An Impromptu Introduction to HTML5 CanvasAn Impromptu Introduction to HTML5 Canvas
An Impromptu Introduction to HTML5 Canvas
 
言語の設計判断
言語の設計判断言語の設計判断
言語の設計判断
 

Similar to Barcamp GoogleMaps - praktické ukázky kódu

HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHexHTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHexTadayasu Sasada
 
How data rules the world: Telemetry in Battlefield Heroes
How data rules the world: Telemetry in Battlefield HeroesHow data rules the world: Telemetry in Battlefield Heroes
How data rules the world: Telemetry in Battlefield HeroesElectronic Arts / DICE
 
Gmaps Railscamp2008
Gmaps Railscamp2008Gmaps Railscamp2008
Gmaps Railscamp2008xilinus
 
Sapo GIS Hands-On
Sapo GIS Hands-OnSapo GIS Hands-On
Sapo GIS Hands-Oncodebits
 
Gis SAPO Hands On
Gis SAPO Hands OnGis SAPO Hands On
Gis SAPO Hands Oncodebits
 
Das Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based ServicesDas Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based ServicesStephan Schmidt
 
executive-mba-pune.pdf
executive-mba-pune.pdfexecutive-mba-pune.pdf
executive-mba-pune.pdfAjit4903
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1Bitla Software
 
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece CoLab Athens
 
Where20 2008 Ruby Tutorial
Where20 2008 Ruby TutorialWhere20 2008 Ruby Tutorial
Where20 2008 Ruby TutorialShoaib Burq
 
Grails : Ordr, Maps & Charts
Grails : Ordr, Maps & ChartsGrails : Ordr, Maps & Charts
Grails : Ordr, Maps & ChartsHenk Jurriens
 
Bs webgl소모임004
Bs webgl소모임004Bs webgl소모임004
Bs webgl소모임004Seonki Paik
 
AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)
AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)
AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)Future Insights
 
Chromium Embedded Framework + Go at Brooklyn JS
Chromium Embedded Framework + Go at Brooklyn JSChromium Embedded Framework + Go at Brooklyn JS
Chromium Embedded Framework + Go at Brooklyn JSquirkey
 
Big Data for each one of us
Big Data for each one of usBig Data for each one of us
Big Data for each one of usOSCON Byrum
 
Responsive Maps in WordPress
Responsive Maps in WordPressResponsive Maps in WordPress
Responsive Maps in WordPressAlicia Duffy
 

Similar to Barcamp GoogleMaps - praktické ukázky kódu (20)

Google Maps API 101
Google Maps API 101Google Maps API 101
Google Maps API 101
 
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHexHTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
 
How data rules the world: Telemetry in Battlefield Heroes
How data rules the world: Telemetry in Battlefield HeroesHow data rules the world: Telemetry in Battlefield Heroes
How data rules the world: Telemetry in Battlefield Heroes
 
Gmaps Railscamp2008
Gmaps Railscamp2008Gmaps Railscamp2008
Gmaps Railscamp2008
 
Google Maps JS API
Google Maps JS APIGoogle Maps JS API
Google Maps JS API
 
Sapo GIS Hands-On
Sapo GIS Hands-OnSapo GIS Hands-On
Sapo GIS Hands-On
 
Gis SAPO Hands On
Gis SAPO Hands OnGis SAPO Hands On
Gis SAPO Hands On
 
Google Maps Api
Google Maps ApiGoogle Maps Api
Google Maps Api
 
Das Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based ServicesDas Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based Services
 
executive-mba-pune.pdf
executive-mba-pune.pdfexecutive-mba-pune.pdf
executive-mba-pune.pdf
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
 
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
 
Ricky Bobby's World
Ricky Bobby's WorldRicky Bobby's World
Ricky Bobby's World
 
Where20 2008 Ruby Tutorial
Where20 2008 Ruby TutorialWhere20 2008 Ruby Tutorial
Where20 2008 Ruby Tutorial
 
Grails : Ordr, Maps & Charts
Grails : Ordr, Maps & ChartsGrails : Ordr, Maps & Charts
Grails : Ordr, Maps & Charts
 
Bs webgl소모임004
Bs webgl소모임004Bs webgl소모임004
Bs webgl소모임004
 
AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)
AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)
AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)
 
Chromium Embedded Framework + Go at Brooklyn JS
Chromium Embedded Framework + Go at Brooklyn JSChromium Embedded Framework + Go at Brooklyn JS
Chromium Embedded Framework + Go at Brooklyn JS
 
Big Data for each one of us
Big Data for each one of usBig Data for each one of us
Big Data for each one of us
 
Responsive Maps in WordPress
Responsive Maps in WordPressResponsive Maps in WordPress
Responsive Maps in WordPress
 

Recently uploaded

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024The Digital Insurer
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 

Recently uploaded (20)

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 

Barcamp GoogleMaps - praktické ukázky kódu

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