.: HosiriS :.

Informatica e non solo

Lavorare con le API di google

Posted by hosiris su settembre 19, 2010

Per un progetto mi si è presentata la necessità di dover sviluppare un frontend che presenti, su una mappa, dei punti di interesse e delle informazioni relative a quai punti.
Ho deciso di usare le API che mette a disposizione Google e PHP con MySQL per la gestione delle informazioni.

Le API ci danno la possibilità di creare delle mappe in maniera molto semplice:

<!DOCTYPE html>
<html>
<head>
<title>Costumer Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 10px; padding: 0px }
 #map_canvas { height: 100%; width: 100%; border: 1px black solid }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=true_or_false&key=key_by_gmap" type="text/javascript">
</script>
<script type="text/javascript">
 function initialize() {
  var latlng = new google.maps.LatLng(41.442, 12.392);
  var myLatlng = new google.maps.LatLng(41.442, 12.392);
  var myOptions = {zoom: 5, center: latlng, mapTypeId: google.maps.MapTypeId.TERRAIN};
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 }
</script>
</head>
<body onload="initialize();">
 <div id="map_canvas"></div>
</body>
</html>

Tramite questo semplice codice il nostro browser ci mostrerà una mappa centrata sull’Italia.
A questo è semplicissimo aggiungere dei “marker”, cioè dei puntatori a delle coordinate esatte. Aggiungiamo il seguente codice alla funzione di inizializzazione:

var myLatlng = new google.maps.LatLng(41.442, 12.392);
var marker = new google.maps.Marker({position: myLatlng, map: map, title:"Punto 1"});

Adesso trattiamo i dati che avremo memorizzato in un DB. Come accennato per far questo utilizzeremo PHP e MySQL, ma per poter interfacciare questo mondo con il linguaggio Javascript usato dalle API dovremmo utilizzare un file di appoggio nel formato XML.
Il DB che useremo avrà una struttura semplicissima, atta a contenere solo le coordinate e il nome del punto, ma possiamo immagazzinare e mostrare una quantità di dati a piacere:

map(id, denominazione, latitudine, longitudine)

Per creare il file xml faremo uso del seguente codice:

<?php
$dbinfo = 'mysql:host=localhost;dbname=dbmap';
$dblink = new PDO($dbinfo, 'user', 'pass');
$query_marker = " SELECT * FROM map ";
if($file = fopen("markers.xml", "w")){
  $_xml ="<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n";
  $_xml .="<markers>\r\n";
  foreach($markers=$dblink->query($query_marker) as $marker){
    $_xml .= "\t<marker id='".$marker['id']."'>".$marker["denominazione"]."\r\n";
    $_xml .= "\t\t<lat>".$marker["latitudine"]."</lat>\r\n";
    $_xml .= "\t\t<lon>".$marker["longitudine"]."</lon>\r\n";
    $_xml .= "\t</marker>\r\n";
  }
  $_xml .="</markers>\r\n";
  fwrite($file, $_xml);
  fclose($file);
}
?>

In questo modo ci ritroviamo a disposizione un file contenente le informazioni necessarie alla creazione i marker sulla mappa. A questo punto carichiamo il file e tramite l’uso del DOM preleviamo i dati:

var xmlDoc;
if (window.ActiveXObject){
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation && document.implementation.createDocument){
  xmlDoc=document.implementation.createDocument("ns","root",null);
}
else{
  alert('cannot handle this');
}
xmlDoc.async=false;
xmlDoc.load("markers.xml");
var markers = xmlDoc.getElementsByTagName('marker');
var lat = xmlDoc.getElementsByTagName('lat');
var lon = xmlDoc.getElementsByTagName('lon');
for(i=0;i<markers.length;i++){
  punto[i] = new google.maps.LatLng(lat[i].childNodes[0].nodeValue, lon[i].childNodes[0].nodeValue);
  mark[i] = new google.maps.Marker({
                    position:punto[i],
                    clickable:true,
                    visible:true,
                    map:map,
                    title:markers[i].childNodes[0].nodeValue
  });
  google.maps.event.addListener(mark[i], 'click', function() {
    window.open();
  });
}

Quindi dopo aver caricato il file e prelevate le informazioni, richiamo la API per la creazione dei marker passando i parametri. Il codice è di semplicissima lettura e direi che è inutile descrivere riga per riga tutto quanto. Naturalmente questa è solo una possibile applicazione, ad esempio nalla mia versione sto preparando una mappa per visualizzare i luoghi in cui sono stato. Oltre la possibilità di mostrare i punti, se clicco su il marker si apre una pagina che mostra tutte le informazioni utili per quella località (hotel, ristoranti...)

Buon divertimento

PS: [23/09/2010] Mi è stato fatto notare che la parte javascript non sempre funziona; purtroppo non sono riuscito a riprodurre il problema, ma a breve posterò una soluzione alternativa!

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

 
%d blogger cliccano Mi Piace per questo: