1 / 20

Google Maps API

This guide provides an overview of the Google Maps JavaScript API, detailing both version 2 and version 3 distinctions. It highlights the necessity for unique API keys in version 2 while version 3 offers portability and geo-location support without key requirements. The document also addresses usage limits and the daily views allowed for various API functionalities. It concludes with basic examples including map initialization and centering, providing developers with essential knowledge to effectively implement Google Maps in web applications.

kaspar
Télécharger la présentation

Google Maps API

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Google Maps API Rostislav Nétek 1.2.2012 Ostravice rostislav.netek@upol.cz

  2. http://code.google.com/intl/cs/apis/maps/index.html • Úvodní stránka pro všechny verze API • Maps Javascript API v2 nebo v3 • v2: starší, potřeba unikátního kódu pro každou mapu http://code.google.com/intl/cs/apis/maps/signup.html • v3: novější, není potřeba kód - přenositelnost, podpora geolokace

  3. Omezení • Omezení max. počtu zobrazení mapy za den, jinak nutnost placené verze • Limity stačí pro 99,65% všech aplikací • JS Maps API  - 25,000 zobrazení/den • JS Maps API styled maps – 2,500 zobrazení/den • Static Maps API – 25,000 zobrazení/den • Static Maps API styled maps – 2,500 zobrazení/den • Street View Image API – 25,000 zobrazení/den

  4. Verze 2 - úvod • Google Maps JavaScript API - version 2 – vpravo odkaz Maps API Developer's Guide – vlevo založka basics • http://code.google.com/intl/cs/apis/maps/documentation/javascript/v2/basics.html

  5. „Hello World“ – první mapa • Vytvořit nový prázdný textový soubor (poznámkový blok, PSPad, apod.) • Do něj vložit následující kód • Uložit jako soubor s koncovkou html (např. mapa1.html) a otevřít v prohlížeči • Nastavit hodnotu sensor na „true“ • Získat api key (identifikátor) nebo smazat „key=abcdefg&“

  6. <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="content-type" content="text/html; charset=utf-8"/> • <title>Google Maps JavaScript API Example</title> • <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true" • type="text/javascript"></script> • <script type="text/javascript"> • function initialize() { • if (GBrowserIsCompatible()) { • var map = new GMap2(document.getElementById("map_canvas")); • map.setCenter(new GLatLng(37.4419, -122.1419), 13); • map.setUIToDefault(); • } • } • </script> • </head> • <body onload="initialize()" onunload="GUnload()"> • <div id="map_canvas" style="width: 500px; height: 300px"></div> • </body> • </html>

  7. „Vycentrování mapy“ • Změna místa a měřítka mapy, která se načte • V klasickém google maps (http://maps.google.com) – pravým tlačítkem klik do mapy – „co je tady“ – zkopírovat souřadnice (např. 49.590906,17.245388) • Vložit získané souřadnice do tohoto řádku místo stávajících: map.setCenter(new GLatLng(37.4419, -122.1419), 13); • Číslo 13 zde určuje měřítko, možno také změnit

  8. <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="content-type" content="text/html; charset=utf-8"/> • <title>Google Maps JavaScript API Example</title> • <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true" • type="text/javascript"></script> • <script type="text/javascript"> • function initialize() { • if (GBrowserIsCompatible()) { • var map = new GMap2(document.getElementById("map_canvas")); • map.setCenter(new GLatLng(49.590906,17.245388), 8); • map.setUIToDefault(); • } • } • </script> • </head> • <body onload="initialize()" onunload="GUnload()"> • <div id="map_canvas" style="width: 500px; height: 300px"></div> • </body> • </html>

  9. Velikost mapy • Předposlední řádek <div id="map_canvas" style="width: 500px; height: 300px"></div> • Lze změnit hodnoty výšky a šířky mapy, tzn. 500px a 300px např. na 800px a 500px

  10. <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="content-type" content="text/html; charset=utf-8"/> • <title>Google Maps JavaScript API Example</title> • <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true" • type="text/javascript"></script> • <script type="text/javascript"> • function initialize() { • if (GBrowserIsCompatible()) { • var map = new GMap2(document.getElementById("map_canvas")); • map.setCenter(new GLatLng(49.590906,17.245388), 8); • map.setUIToDefault(); • } • } • </script> • </head> • <body onload="initialize()" onunload="GUnload()"> • <div id="map_canvas" style="width: 800px; height: 500px"></div> • </body> • </html>

  11. Map types - typ podkladové mapy • G_NORMAL_MAP - základní • G_SATELLITE_MAP - letecká • G_HYBRID_MAP – letecká s popisky • G_PHYSICAL_MAP – terénní • Pod var map = new GMap2(document.getElementById("map_canvas"));přidat nový řádek map.setMapType(G_SATELLITE_MAP);

  12. <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="content-type" content="text/html; charset=utf-8"/> • <title>Google Maps JavaScript API Example</title> • <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true" • type="text/javascript"></script> • <script type="text/javascript"> • function initialize() { • if (GBrowserIsCompatible()) { • var map = new GMap2(document.getElementById("map_canvas")); • map.setMapType(G_SATELLITE_MAP); • map.setCenter(new GLatLng(49.590906,17.245388), 8); • map.setUIToDefault(); • } • } • </script> • </head> • <body onload="initialize()" onunload="GUnload()"> • <div id="map_canvas" style="width: 800px; height: 500px"></div> • </body> • </html>

  13. Info Windows – info bubliny • Přidání libovolného textu • Přidat 2 řádky za map.setUIToDefault(); map.openInfoWindow(map.getCenter(),                   document.createTextNode("Hello, world")); • Text „Hello world“ lze nahradit libovolným textem

  14. <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="content-type" content="text/html; charset=utf-8"/> • <title>Google Maps JavaScript API Example</title> • <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true" • type="text/javascript"></script> • <script type="text/javascript"> • function initialize() { • if (GBrowserIsCompatible()) { • var map = new GMap2(document.getElementById("map_canvas")); • map.setMapType(G_SATELLITE_MAP); • map.setCenter(new GLatLng(49.590906,17.245388), 8); • map.setUIToDefault(); • map.openInfoWindow(map.getCenter(),                    • document.createTextNode("Libovolný text tady")); • } • } • </script> • </head> • <body onload="initialize()" onunload="GUnload()"> • <div id="map_canvas" style="width: 800px; height: 500px"></div> • </body> • </html>

  15. Markers - body • Záložka overlays (vlevo) • Přidání 10 náhodných bodů • // Add 10 markers to the map at random locations • var bounds = map.getBounds(); • var southWest = bounds.getSouthWest(); • var northEast = bounds.getNorthEast(); • var lngSpan = northEast.lng() - southWest.lng(); • var latSpan = northEast.lat() - southWest.lat(); • for (var i = 0; i < 10; i++) { • var point = new GLatLng(southWest.lat() + latSpan * Math.random(), • southWest.lng() + lngSpan * Math.random()); • map.addOverlay(new GMarker(point));

  16. <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="content-type" content="text/html; charset=utf-8"/> • <title>Google Maps JavaScript API Example</title> • <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true" • type="text/javascript"></script> • <script type="text/javascript"> • function initialize() { • if (GBrowserIsCompatible()) { • var map = new GMap2(document.getElementById("map_canvas")); • map.setMapType(G_SATELLITE_MAP); • map.setCenter(new GLatLng(49.590906,17.245388), 8); • map.setUIToDefault(); • map.openInfoWindow(map.getCenter(),                    • document.createTextNode("Libovolný text tady")); • // Add 10 markers to the map at random locations • var bounds = map.getBounds(); • var southWest = bounds.getSouthWest(); • var northEast = bounds.getNorthEast(); • var lngSpan = northEast.lng() - southWest.lng(); • var latSpan = northEast.lat() - southWest.lat(); • for (var i = 0; i < 10; i++) { • var point = new GLatLng(southWest.lat() + latSpan * Math.random(), • southWest.lng() + lngSpan * Math.random()); • map.addOverlay(new GMarker(point)); • } • } • } • </script> • </head> • <body onload="initialize()" onunload="GUnload()"> • <div id="map_canvas" style="width: 800px; height: 500px"></div> • </body> • </html>

  17. Markers - body • Přidání 1 bodu dle zadaných souřadnic • Zjistit souřadnice z Google Maps (co je tady) • Smazat 10 náhodných bodů z předcházejícího kroku • var point = new GLatLng(49.179,17.945); • map.addOverlay(new GMarker(point)); • Obdobně i linie (čáry) a polygony (areály)

  18. <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="content-type" content="text/html; charset=utf-8"/> • <title>Google Maps JavaScript API Example</title> • <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true" • type="text/javascript"></script> • <script type="text/javascript"> • function initialize() { • if (GBrowserIsCompatible()) { • var map = new GMap2(document.getElementById("map_canvas")); • map.setMapType(G_SATELLITE_MAP); • map.setCenter(new GLatLng(49.590906,17.245388), 8); • map.setUIToDefault(); • map.openInfoWindow(map.getCenter(),                    • document.createTextNode("Libovolný text tady")); • var point = new GLatLng(49.179,17.945); • map.addOverlay(new GMarker(point)); • } • } • </script> • </head> • <body onload="initialize()" onunload="GUnload()"> • <div id="map_canvas" style="width: 800px; height: 500px"></div> • </body> • </html>

  19. KML vrstva • Záložka Services (vlevo) • Nutné znát http adresu KML souboru • Před function initialize() přidat var geoXml; • Za map.setMapType(G_SATELLITE_MAP); přidat: • geoXml = new GGeoXml("http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml");    map.addControl(new GLargeMapControl());    map.setCenter(new GLatLng(41.875696,-87.624207), 11);     map.addControl(new GLargeMapControl());    map.addOverlay(geoXml);

  20. <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="content-type" content="text/html; charset=utf-8"/> • <title>Google Maps JavaScript API Example</title> • <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true" • type="text/javascript"></script> • <script type="text/javascript"> • var geoXml; • function initialize() { • if (GBrowserIsCompatible()) { • var map = new GMap2(document.getElementById("map_canvas")); • map.setMapType(G_SATELLITE_MAP); • geoXml = new GGeoXml("http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml"); • map.addControl(new GLargeMapControl()); • map.setCenter(new GLatLng(41.875696,-87.624207), 11); • map.addControl(new GLargeMapControl()); • map.addOverlay(geoXml); • map.setCenter(new GLatLng(49.590906,17.245388), 8); • map.setUIToDefault(); • map.openInfoWindow(map.getCenter(),                    • document.createTextNode("Libovolný text tady")); • var point = new GLatLng(49.179,17.945); • map.addOverlay(new GMarker(point)); • } • } • </script> • </head> • <body onload="initialize()" onunload="GUnload()"> • <div id="map_canvas" style="width: 800px; height: 500px"></div> • </body> • </html>

More Related