NézetNyomtat

32. óra
Címkék > Óra

Google finomságok

Kriván Bálint

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: Demo

1. 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.
<body onload="init();">

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!");  
      }
    }
  );  
}