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.
