Le mappe sono un aspetto essenziale di qualsiasi sito Web aziendale. Anche se sei completamente basato su Internet, ai clienti piace ancora sapere chi sei e dove vivi. Google Maps è ora il predefinito per molti siti Web in quanto è il più semplice da usare, apparentemente il più preciso ed è gratuito. Alla fine di questo tutorial, saprai esattamente come incorporare una Google Map reattiva nel tuo sito web.
Google Maps predefinito non è sempre reattivo, pertanto potrebbe non adattarsi a schermi di dimensioni diverse. A seconda che tu stia utilizzando un plug-in WordPress o lo incorpori tu stesso utilizzando il codice, potrebbe essere necessario aggiungere un paio di righe di CSS per rendere la mappa reattiva.
Web design reattivo
Responsive è un termine chiave qui. Descrive il web design che tiene conto dell'esperienza dell'utente e del dispositivo per garantire che sia lo stesso indipendentemente dal dispositivo utilizzato per accedere al sito Web. Ad esempio, un sito Web reattivo dovrebbe fornire la stessa qualità di esperienza, sia che lo visiti su un desktop, tablet o smartphone.
Per fare ciò, il sito Web deve adattarsi a diverse risoluzioni, dimensioni dello schermo e al tocco.
Incorporare una mappa Google reattiva in un sito Web
Sono tre i modi che conosco per incorporare Google Maps in un sito Web. Se usi un tema WordPress, potrebbe avere la funzione integrata. Puoi anche usare un plugin o puoi incorporare il codice direttamente da Google in qualsiasi sito web. La prima e la seconda opzione sono ottime per gli utenti di WordPress, altri CMS usano anche i plug-in, quindi sei coperto lì. L'ultima opzione, l'utilizzo del codice dovrebbe funzionare sulla maggior parte dei siti Web, indipendentemente da come sono stati creati.
Utilizza un tema WordPress per incorporare una mappa Google reattiva
Alcuni temi di WordPress avranno una funzione specifica per Google Maps. Poiché le mappe sono così fondamentali per i siti Web moderni, alcuni disegnatori di temi li hanno implementati direttamente nei loro progetti. Se il tuo tema ha una funzione mappa, probabilmente avrai bisogno di un'API di Google Maps per farlo funzionare. Aggiungete l'API nelle opzioni del tema e parlerà direttamente a Google per creare la mappa ad ogni visita.
- Visita questa pagina sul sito Web di Google per iniziare il processo API.
- Seleziona il pulsante blu Inizia.
- Seleziona l'icona del menu a tre righe in alto a sinistra nella nuova schermata.
- Seleziona API e servizi, quindi Credenziali.
- Seleziona Crea credenziali e quindi Chiave API.
- Seleziona Limita chiave e seleziona Referrer HTTP.
- Seleziona Salva
- Copia la chiave API e incollala nella pagina delle opzioni di progettazione che la richiede.
Dopo aver ottenuto la chiave API, puoi implementare la mappa di Google nel tuo sito Web utilizzando gli strumenti di progettazione del tema. Finché il tema è reattivo, anche la mappa dovrebbe esserlo.
Utilizza un plug-in per incorporare una mappa Google reattiva
WordPress usa plugin, Joomla usa estensioni, Drupal usa moduli o plugin e altri CMS usano convenzioni di denominazione simili. In entrambi i casi, i plug-in si riferiscono ad elementi modulari che è possibile collegare al CMS principale per aggiungere funzionalità. Una caratteristica utile è una mappa di Google. Se il tema del tuo sito Web non include un elemento mappe e non vuoi eseguire tu stesso il codice, un plug-in è la cosa migliore da fare.
- In WordPress, vai su Plugin e Aggiungi nuovo.
- Cerca Google Maps e seleziona un plug-in che ti piace l'aspetto.
- Abilitalo nei Plugin e vai alle sue Impostazioni.
- Aggiungi l'API di Google Maps che hai creato sopra dove indicato e Salva.
- Implementa il plug-in dove vuoi che appaia la mappa.
Gli altri CMS differiscono leggermente nella posizione dei nomi e dei menu, ma il principio è più o meno lo stesso. La maggior parte, se non tutti, i plugin di mappe richiedono l'API di Google Maps per funzionare.
Utilizza il codice per incorporare una mappa Google reattiva
Se non usi WordPress o altri CMS, puoi comunque incorporare una Google Map reattiva. Devi solo usare il codice invece di un modulo. Ci vuole un po 'più di lavoro ma fornirà le stesse mappe reattive.
- Visita Google Maps e naviga fino a quando la mappa che desideri visualizzare riempie lo schermo.
- Seleziona il link blu Condividi e copia il codice da Incorpora mappa.
- Aggiungi il tuo codice di incorporamento specifico al codice seguente tra e.
- Aggiungi il codice all'interno dell'HTML della tua pagina web dove vuoi vedere la mappa.
- Salva le tue modifiche.
Il codice:
Questo non è il mio codice, l'ho trovato online ma l'ho testato sul mio sito web. Funziona come un fascino e dovrebbe funzionare se si utilizza un CMS, HTML, Hugo o una delle tante altre lingue del sito Web o strumenti di pagina.
