Con l’introduzione della versione 3 delle API di Google map non è più necessario generare una chiave univoca per ogni sito dove dobbiamo inserire le nostre mappe e questo semplifica molto le cose quando procediamo alla pubblicazione di un sito dall’area di sviluppo in produzione perché non ci dobbiamo preoccupare di generare una nuova chiave.
Ma ora andiamo più nello specifico e vediamo come iniziare da markup della nostra pagina dove inseriamo un div con ID map.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> <head> <title>Contatti - Sport 62</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="Language" content="it"/> <meta name="Description" content=""/> <meta name="KeyWords" content=""/> <script type="text/javascript" src="/include/jquery.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=it"></script> <!-- DOCUMENT READY --> <script type="text/javascript"> $(document).ready(function(){ }); </script> <style> #contenitore{ width:900px; height:100%; margin:auto; background-color:#ccc; } #map { width:500px; height:400px; } </style> </head> <body> <div id="contenitore"> <div id="mappa"></div> </div> </body> </html>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
scaleControl: true});
map.setCenter(new google.maps.LatLng(45.66100, 12.24581));
map.setZoom(15);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var marker = new google.maps.Marker({map: map, position:
map.getCenter()});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent("<p>Testo di prova del fumetto<br />Piazzale Duca d'aosta<br />Treviso (TV)<br />Ulteriore riga</p>");
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
</script>
In questa funzione per prima cosa andiamo ad inizializzare l’oggetto google.maps.Map nel nostro div, poi gli impostiamo il centro della mappa con le coordinate, in questo esempio è la stazione ferroviaria di Treviso ed impostiamo il livello di zoom a 15, l’ultima impostazione della mappa è la tipologia che corrisponde a Mappa quando utilizziamo le Google Maps.
Fatto questo creiamo un nuovo marker posizionandolo nel nostro centro della mappa ed è molto semplice perché nell’inizializzazione gli passiamo un oggetto con la mappa da utilizzare e la posizione.
Impostato il marker creiamo il fumetto attracerso l’oggetto InfoWindows() dove gli facciamo scrivere del testo di prova e lo associamo al marker creato prima.
L’ultima azione che facciamo è associare al click sul marker l’apertura del fumetto.
Ora è sufficiente richiamare la funzione initialize() all’apertura della pagina ed abbiamo la nostra mappa.
$(document).ready(function(){
initialize();
})
Per tutte le opzioni che si possono utilizzare vi rimando alla documentazione ufficiale di google Map.
L’esempio di questo post lo potete trovare qui.
Come sempre aspetto commenti / critiche / approvazioni
