SlideShare uma empresa Scribd logo
1 de 13
Baixar para ler offline
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

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 
言語の設計判断
言語の設計判断言語の設計判断
言語の設計判断
 

Semelhante a 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
 
Gis SAPO Hands On
Gis SAPO Hands OnGis SAPO Hands On
Gis SAPO Hands Oncodebits
 
Sapo GIS Hands-On
Sapo GIS Hands-OnSapo GIS Hands-On
Sapo GIS 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
 

Semelhante a 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
 
Gis SAPO Hands On
Gis SAPO Hands OnGis SAPO Hands On
Gis SAPO Hands On
 
Sapo GIS Hands-On
Sapo GIS Hands-OnSapo GIS Hands-On
Sapo GIS 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
 

Último

KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 

Último (20)

KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 

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