Google finomságok
Bevezetés
Mit fogunk megismerni? Kicsit elmerülünk a Javascript birodalmában (de csak a kellő mértékben), hogy tudjunk használni olyan nagyszerű API-okat (
Application Programming Interface), mint például a
Google Maps API, vagy a
Google Data API (Ezen belül is Spreadsheets Data API). Eközben megismerkedünk a
JSON-nal (JavaScript Object Notation), de csak említés és alkalmazás szinten.
Mit fogunk csinálni?
A szakkör végére egy ilyen cuccost mindenki fog tudni maga is csinálni, de természetesen együtt megcsináljuk a szakkörön:
Demo1. Google térkép beillesztése DIV-be
ID azonosítóval ellátott DIV
<DIV id="map_canvas" style="width:100%; height:600px; background-color:#cccccc">
</DIV>
MAPS API betöltése
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
Térkép inicializálása
<script type="text/javascript">
function init()
{
var latlng = new google.maps.LatLng( 47.498, 19.041);
var opciok = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("map_canvas"),
opciok
);
}
</script>
A BODY onload attributumával futtatjuk az init függvényt, hogy akkor töltse be a térképet, amikor már felépült a DOM.
A teljes kód
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>32. óra</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
var map;
function init()
{
var latlng = new google.maps.LatLng( 47.498, 19.041);
var opciok = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("map_canvas"),
opciok
);
}
</script>
</head>
<body onload="init();">
<div id="map_canvas" style="width: 100%; height: 600px; background-color:#cccccc">
</div>
</body>
</html>
2. Jelölők a térképen
function init()
{
...
putMarker();
}
function putMarker()
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(47,20),
map: map
});
}
3. GEO-kódolás avagy címek keresése
HTML
<input type="text" id="address"/>
<input type="button" value="Keresés" onclick="search();">
Javascript
...
var geocoder;
...
function init()
{
...
geocoder = new google.maps.Geocoder();
}
function putMarker(pos)
{
var marker = new google.maps.Marker({
position: pos,
map: map
});
}
function search()
{
var cim = document.getElementById("address").value;
geocoder.geocode(
{address:cim},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK){
putMarker(results[0].geometry.location);
map.fitBounds(results[0].geometry.viewport);
} else {
alert("keresési hiba!");
}
}
);
}
4. Információk a jelölőn
function putMarker(result)
{
var marker = new google.maps.Marker({
position: result.geometry.location,
map: map,
title: result.formatted_address
});
}
function search()
{
var cim = document.getElementById("address").value ;
geocoder.geocode(
{address:cim},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK){
putMarker(results[0]);
map.fitBounds(results[0].geometry.viewport);
} else {
alert("keresési hiba!");
}
}
);
}
