Fai interagire le API di Google Maps con le applicazioni di Facebook

Finalmente sono riuscito a risolvere tutti i grattacapi per l’integrazione di Google Maps in un’applicazione Facebook.

Sono riuscito a farlo grazie ad un articolo presente sulla rivista specialistica “ioProgrammo”, ma come è giusto che sia la guida presentava alcune omissioni e/o imprecisioni che mi hanno portato via un po’ di tempo.

Ho risolto tutto, la funzione principale dell’applicazione funziona a meraviglia e sono qui proprio per spiegartela più in dettaglio che posso (per qualsiasi problema puoi lasciare un commento).

N.B. Prima di continuare a leggere e se non hai ancora le conoscenze base ti consiglio di leggere i precedenti articoli che riguardano lo sviluppo di applicazioni Facebook, dato che verranno date alcune cose per scontate.

Ma non preoccuparti, è tutto spiegato qui:
Creiamo insieme la nostra prima applicazione Facebook – Primi Passi
Creiamo insieme la nostra prima applicazione Facebook – Impostiamo Tutte Le Opzioni
Visualizza il Feed RSS del tuo blog su Facebook creando un’applicazione ed invita i tuoi amici ad usarla

IN COSA CONSISTE L’APPLICAZIONE

Questa applicazione Facebook ti permette di visualizzare la mappa di Google Maps ed inserirvi un posto che hai visitato correlato da una descrizione.

Una volta inserita la località le API troveranno automaticamente le coordinate (se esiste) e l’applicazione memorizzerà queste informazioni in un database (che dovrà risiedere sul tuo hosting).

In sostanza, l’applicazione mostra i luoghi visitati da te e tutti coloro che l’hanno utilizzata.
Inutile dirlo, l’applicazione possiede tutti i controlli principali della Google Maps (zoom, satellite etc…).

In questo momento l’applicazione è piuttosto semplice dato che non include particolari funzionalità che ho intenzione di mettere, resta comunque molto più complessa della precedente.

Senza che mi dilungo troppo nella spiegazione di cosa fa l’applicazione (dato che lo vedrai tu stesso con il link che ti fornirò) cominciamo subito a spiegarti il codice che ho utilizzato (ometterò ciò che ho già spiegato negli articoli precedenti, ma trovi comunque il codice completo in fondo all’articolo).

Eccoti allora le istruzioni per far interagire correttamente le API di Google Maps all’interno di un’applicazione Facebook.

OPERAZIONI PRELIMINARI

Prima di cimentarti nella creazione di questa applicazione devi creare tramite il pannello di amministrazione di PhpMyAdmin (o similari) che ti è fornito dal tuo hosting una nuova tabella in MySQL. Meglio se crei un intero database (se ti è possibile) interamente dedicato alle applicazioni Facebook che di volta in volta svilupperai.

Ad ogni modo la tabella che ho preso in considerazione per questo tutorial si chiama “punti” e ha i seguenti campi:

id | BIGINT | AUTO_INCREMENTFacebook_id | BIGINT
latitudine | BIGINT | NOT_NULL | DEFAULT: 0
longitudine | BIGINT | NOT_NULL | DEFAULT: 0
descrizione | TEXT
citta | TEXT

N.B. Voglio ricordarti che nell’articolo non è spiegato tutto il codice, ma solo le parti che riguardano l’utilizzo di Google Maps e le rispettive API all’interno di Facebook. Puoi visualizzare il codice completo scaricandolo dal link in fondo e chiedendo qualsiasi cosa attraverso i commenti.

INTEGRIAMO GOOGLE MAPS API

Con questo codice vai ad includere la tua API di Google Maps. E’ una chiave che devi richiedere tu stesso direttamente tramite questa pagina web, inserire il tuo sito web e automaticamente ti viene assegnata una CHIAVE API per utilizzare le Google Maps all’interno del tuo sito.

<script src="http://maps.google.com/maps?file=api&v=2&key=TUA_API_GOOGLE_MAPS" type="text/javascript">
</script>

FUNCTION CREATEMARKER

Con questa funzione crei un etichetta (label o marker) sulla mappa con le indicazioni che passi come parametro.
I parametri sono:  ID di Facebook, coordinate, località e descrizione.

function createMarker(user,point,citta,descrizione)
{
// Variabile marker
var marker = new GMarker(point);
// Crea listener per il click sull'oggetto
GEvent.addListener(marker, "click", function()
{
marker.openInfoWindowHtml("L'utente <strong>" + user + " </strong>ha visitato <br> <strong>" + citta + "</strong><br/>" + descrizione);
});
return marker;
}

FUNCTION LOAD

Questa funzione viene eseguita appena viene avviata l’applicazione. Non fa altro che creare la mappa integrandone tutti i controlli necessari. Vengono inoltre creati anche i marker riferiti ai luoghi già visitati dagli altri utenti prelevandoli dal database.

function load()
{
if (GBrowserIsCompatible())
{
// Crea mappa
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById("map"));
 
// Visualizza i controlli - TIPO MAPPA (Mappa, Satellite)
map.addControl(new GMapTypeControl());
 
// Visualizza i controlli - ZOOM GRANDE
map.addControl(new GSmallMapControl());
 
// Imposta le coordinate iniziali
map.setCenter(new GLatLng(45.4419, 9.1419), 6);
 
<?php
// Esegue una query sul database per prelevare i dati
$connection = mysql_connect("host","username","password");
mysql_select_db("nome database", $connection);
error_reporting(1);
 
$sql = "SELECT DISTINCT * FROM punti WHERE Facebook_id = " . mysql_real_escape_string($user);
$result = mysql_query($sql,$connection) or die($sql. " " . mysql_error());
 
// Stampa tutti i marker risultanti dalla query sulla mappa
while($row = mysql_fetch_assoc($result))
{
echo "point = new GLatLng({$row["latitudine"]},{$row["longitudine"]});\n";
echo "map.addOverlay(createMarker('".addslashes($row["Facebook_id"])."', point, '".addslashes($row["citta"])."','".addslashes($row["descrizione"])."'));\n";
//echo "map.addOverlay(new GMarker(point));\n";
}
?>
}
}

FUNCTION SALVASEGNALAZIONE

Con questa funzione vengono passati tutti i parametri ad una pagina che si occupa di raccoglierli e memorizzarli nel database tramite una richiesta AJAX con JQUERY di tipo POST.

function salvaSegnalazione()
{
latLong();
var user = $("input#user").val();
var citta = $("input#citta").val();
var desc = $("input#desc").val();
var dataString = 'citta='+ citta +'&user='+ user +'&desc='+ desc +'&latitudine='+ latitudine +'&longitudine='+ longitudine;
var url = "salvasegnalazione.php";
 
$.post(
url,
dataString,
function(data)
{
alert("Eseguito");
});
 
return false;
}

FUNCTION LATLONG

Questa è una funzione molto importante perché riceve come parametro la località che hai visitato ed in caso esiste ne vengono determinate le coordinate. Se vengono determinate le coordinate la mappa viene automaticamente spostata alla località che hai appena inserito.

function latLong()
{
var address = $("input#citta").val();
geocoder.getLatLng(address,
function(point)
{
if (!point)
{
// Indirizzo non trovato, cerca nel database.
alert(address + " non trovato!");
return false;
}
else
{
// Inserisco i dati nel modulo
var user = $("input#user").val();
latitudine = point.y;
longitudine = point.x;
 
// Muovo la mappa
map.setCenter(point, 15);
 
// Aggiungo marker
map.addOverlay(createMarker(user,point,$("input#citta").val(),$("input#desc").val()));
}
});
}

IL FILE “SALVASEGNALAZIONE.PHP”

Questo file si occupa di ricevere ed elaborare tutti i dati che devono essere memorizzati all’interno del database MySQL.

<?php
require("config/config.inc.php");
 
$is_tab = isset($_POST['fb_sig_in_profile_tab']);
if(!$is_tab)
$user = $facebook->require_login();
 
$connection = mysql_connect("host","user","pass");
mysql_select_db("nome database", $connection);
 
$user2 = $_POST['user'];
$latitudine = $_POST['latitudine'];
$longitudine = mysql_real_escape_string($_POST['longitudine']);
$desc = mysql_real_escape_string($_POST['desc']);
$citta = mysql_real_escape_string($_POST['citta']);
 
$sql = "INSERT INTO punti(Facebook_id,latitudine,longitudine,descrizione,citta) VALUES(
'$user',
'$latitudine',
'$longitudine',
'$desc',
'$citta');";
 
mysql_query($sql) or die("Errore: " . $sql . " " . mysql_error());
?>

Questo è tutto. Credo di averti spiegato tutto ciò che serve per far interagire Google Maps con Facebook.

Se vuoi dare un’occhiata all’applicazione eccoti il link, l’ho chiamata “Dove Sei Stato?” J
http://apps.facebook.com/dove_sei_stato/

Qui puoi trovare il codice completo:

  Facebook App: Dove Sei Stato? (3,6 KiB, 177 hits)