Home / Programmazione / Javascript - AJAX / Google Maps dentro finestra modale
Mattepuffo

Google Maps dentro finestra modale

Google Maps dentro finestra modale

A volte è più comodo mettere Goole Maps dentro una finestra modale, soprattutto quando in una stessa pagina ci stanno diverse mappe.

Di come usare GMaps con Javascript ne ho parlato in questo articolo.

Partiamo da li con qualche modifica.

Preparate una pagina php (o in altro linguaggio lato server; ci serve per raccogliare i parametri passati in GET dalla pagina principale):

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#tooltip {
color: black;
font-family: Arial;
}

#tooltip a {
color: blue;
text-decoration: underline;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=it"></script>
<script type="text/javascript" src="gmap.js"></script>
</head>
<body onload="maps(, );"> // PURTROPPO NON SI LEGGE CHE C'E DENTRO ALLE PARENTESI
<div id="map_canvas" style="width: 590px; height: 590px;"></div>
</body>
</html>

Purtroppo non si vede che c'è dentro maps(); in pratica dovete fare echo delle due variabili passate in GET (echo $_GET['lat'], echo $_GET['lng']).

Ho messo un evento onload dentro al body in modo da caricare la pagine con latitudine e longitudine che gli passeremo dalla pagina principale.

Così facendo possiamo usare sempre lo stesso file senza crearne uno per ogni mappa.

Il file map.js sarà una cosa del genere:

function maps(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
var tooltip = '<div id="tooltip">'+
'<a href="http://maps.google.it/maps?q="'+lat+','+lng+'" target="_blank">Indicazioni stradali</a>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: tooltip
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}

Come vedete adesso latitudine e longitudine sono parametrizzati.

A questo punto dobbiamo creare la pagina che richiamerà la finestra modale con la roba sopra caricata al suo interno.

Per la finestra modale ho scelto di usare il plugin per jQuery Thickbox.

Potete scaricare il tutto da qua.

Quindi prima di tutto includiamo ciò che ci serve nella pagina:

<link type="text/css" rel="stylesheet" href="thickbox.css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="thickbox.js"></script>

A questo punto siamo pronti per il setup della pagina:

<a href="#TB_inlinemodalContent?height=600&width=600&inlineId=cimoda" class="thickbox">CIMODA</a>

<div id="cimoda" style="display:none;">
<iframe width="590" height="590" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://www.sito.it/map.php?lat=41.9053328&lng=12.5554597"></iframe>
</div>

Il click sul link attiva il plugin e la finestra modale.

I due sono legati dall'id; infatti notate nel link inlineId=cimoda, che corrsiponde all'id del div sottostante.

Nel div notate invece che è dettato su display:none, in modo da visualizzarlo solo se richiamato.

Dentro c'è un iframe che richiama il file creato prima passandogli in GET le coordinate.

Questo è solo uno dei modi per usare Thickbox; sul sito ci stanno vari esempi.

Vi consiglio anche di dare un'occhiata al file CSS.