Jak na API mapy

Download Report

Transcript Jak na API mapy 

Google Maps API
Rostislav Nétek
1.2.2012 Ostravice
[email protected]
http://code.google.com/intl/cs/ap
is/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
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
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/d
ocumentation/javascript/v2/basics.html
„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&“
•
•
•
•
•
•
•
•
•
<!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>
„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
•
•
•
•
•
•
•
•
•
<!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>
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
•
•
•
•
•
•
•
•
•
<!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>
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);
•
•
•
•
•
•
•
•
•
<!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>
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
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<!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>
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));
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<!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>
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)
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<!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>
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://gmapssamples.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);
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<!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>