add google map to your site

Si suppone che su Google Cloud Platform sia già stato selezionato un progetto e attivato le api Maps (Maps Embed API e Maps JavaScript API) … in un altra puntata.

Come indicato in Google Developers, all’interno dei tag <head></head> aggiungere codice configurazione base mappa, nel caso wordpress, molto probabilmente modificare il file header.php del theme che si utilizza:

<script>
      // Initialize and add the map
      function initMap() {
        // costanti principali posizionamento
        // v.le A.Moro 5 Como -> sostituire con ...
        const como = { lat: 45.80454003965425, lng: 9.090957504781633 };
        const map = new google.maps.Map(document.getElementById("map-area"), {
          zoom: 16,
          center: como,
        });
        // The marker, positioned at como
        const marker = new google.maps.Marker({
          position: como,
          map: map,
        });
      }
    </script>
    <!-- style blocco mappa in questo caso tutta larghezza -->
    <style type="text/css">
      #map-area {
        height: 400px;
        width: 100%;
      }
    </style>

Tutta la documentazione parte da Google Maps Platform si può trovare traccia delle configurazioni in developers console Javascript API per aggiungere o personalizzare markers o altre informazioni.

locator plus
nota: tener presente configuratore locator plus anche questo in un’altra puntata

Nel punto esatto dove dovrà apparire mappa inserisco:

<div id="map-area"></div>
		<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
			async></script>

dove YOUR_API_KEY è la chiave assegnata al progetto in Google Cloud Platform.

A questo punto dovrebbe essere visualizzata la mappa.

Offcanvas right