Consigli Grafici: INSERIRE PIÙ DI UNA GOOGLE MAP IN UNA PAGINA WEB

Recentemente ho dovuto inserire 3 mappe di Google nella stessa pagina (questo il risultato).
È davvero semplice, però bisogna conoscere il funzionamento di HTML, CSS e jQuery.

Anche per chi non avesse familiarità con questi linguaggi, ecco una guida per trovare la giusta strada.

nel codice HTML dobbiamo inserire tanti <div class="map" id="map_1"></div> quante sono le mappe che vogliamo vedere:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="map" id="map_1"></div> 
    <div class="map" id="map_2"></div>
    <div class="map" id="map_3"></div>
  </body>
</html>

Come avete notato ho dato a tutti e 3 i div la stessa classe "map" mentre ho cambiato gli id, per renderli univoci. La classe ci servirà per dare una formattazione (tutte e tre le mappe avranno le stesse dimensioni e gli stessi spazi ai lati) e gli id invece indicheranno diverse località.

Nel vostro documento CSS o anche nell'head se contenuto in <style></style> inserite questo codice:

.map { width: 500px; height: 400px; margin:10px; background-color: #fff;
       }

In questo modo abbiamo detto che tutti i <div class="map"></div> avranno larghezza 500px e altezza 400px e margine di 10px, qui potete mettere le misure che preferite. Ricordatevi di dare come colore di sfondo, il colore effettivo del vostro sfondo.

Ora nell'<head></head> inserite il seguente codice:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var map_canvas_1 = document.getElementById('map_1');
        var map_options_1 = {
          center: new google.maps.LatLng(45.686336, 12.255321),
          zoom: 17,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map_1 = new google.maps.Map(map_canvas_1, map_options_1)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <script>
      function initialize() {
        var map_canvas_2 = document.getElementById('map_2');
        var map_options_2 = {
          center: new google.maps.LatLng(45.675542, 12.167517),
          zoom: 17,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map_2 = new google.maps.Map(map_canvas_2, map_options_2)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <script>
      function initialize() {
        var map_canvas_3 = document.getElementById('map_3');
        var map_options_3 = {
          center: new google.maps.LatLng(45.630725, 11.956380),
          zoom: 17,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map_3 = new google.maps.Map(map_canvas_3, map_options_3)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Si tratta di ripetere lo stesso script tre volte (visto che vogliamo 3 mappe), la parte scritta in verde si riferisce appunto alle nostre classi (map_1, map_2, map_3); le parti evidenziate in verde sono gli id dello script, devono essere univoci se vogliamo tre mappe che indichino tre posti diversi; le parti evidenziate in arancione fanno partire lo script. Infine la parte scritta in rosso indica le diverse coordinate per ogni mappa, se tutto va bene è l'unica parte che dovete modificare voi.
Trovare le coordinate della zona che vi interessa è semplicissimo:

Andate su Google Map e dopo aver trovato il posto desiderato, cliccate col tasto destro e poi la voce "Che cosa c'è qui?"