Come aggiungere una mappa di Google reattiva in WordPress

Non importa dove stai andando, Google Maps ti mostrerà la strada. Essere in grado di ottenere immediatamente indicazioni stradali è diventato essenziale durante la navigazione nelle città. E poiché è la soluzione per mappe più popolare, aggiungere Google Maps al tuo sito WordPress non potrebbe essere più semplice. Questa tecnologia di mappatura di facile utilizzo fornirà informazioni commerciali, informazioni di contatto e indicazioni stradali per raggiungere la posizione prescelta, rendendo la navigazione estremamente comoda per i tuoi utenti.

Pronto per aggiungere una mappa al tuo sito WordPress? Esistono un paio di modi diversi per aggiungerne uno, manualmente e con un plug-in. Iniziamo con il metodo fai da te.

Aggiunta manuale di Google Maps

Incorporamento della mappa

L'aggiunta e l'incorporamento di una mappa è il modo in cui otterrai la mappa effettiva da visualizzare su una pagina e sono necessari solo un paio di semplici passaggi. L'aggiunta manuale della mappa è la strada da percorrere se ne hai solo una (o solo alcune) da aggiungere al tuo sito.

1. Vai su Google Maps e inserisci la posizione.

2. Fare clic sul pulsante di ricerca.

3. Scegli "Condividi" (sarà l'opzione a destra).

4. Copia il codice di incorporamento, assicurandoti che sia tutto selezionato prima di copiare.

Aggiunta della mappa in WordPress

Per aggiungere la mappa, dovrai modificare un Post o una Pagina. Un ottimo punto per aggiungere la tua mappa è la pagina dei contatti o qualsiasi post che parla di una posizione specifica che i tuoi utenti potrebbero aver bisogno di trovare.

5. Vai su Messaggi > Aggiungi o Pagine > Aggiungi.

6. Apri l'editor HTML (in modalità Testo) e incolla il codice di incorporamento dove desideri che appaia la mappa.

7. Scegli Salva bozza, Aggiorna o Pubblica in base alle tue preferenze.

Se visualizzi la pagina, dovresti vedere la tua mappa. Se la mappa non viene visualizzata, assicurati di ricontrollare che l'intero codice di incorporamento sia stato copiato e incollato nell'editor.

Rendere la mappa reattiva

Questo è facoltativo quando si lavora con la mappa, ma è un'ottima idea per offrire la migliore esperienza utente ai visitatori. Gli utenti sono in genere in movimento quando cercano indicazioni stradali, quindi questa mappa reattiva sarà utile quando utilizzano il proprio dispositivo mobile.

Potresti aver notato che c'era una misura di larghezza e altezza iframe che hai incollato nell'editor: dovrai apportare alcune modifiche per rendere la mappa reattiva. Alcuni semplici CSS faranno il trucco; tutto ciò che serve è un tag div aggiuntivo attorno al codice di incorporamento. Usa la classe responsive-map modo che il tuo codice ora assomigli a questo:

<div class="responsive-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3510.126963167523!2d-81.5660680494897!3d28.385232982430246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88dd7ee634caa5f7%3A0xa71e391fd01cf1a0!2sWalt+Disney+World+Resort!5e0!3m2!1sen!2sus!4v1463933469006" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Aggiungi il CSS

L'aggiunta di queste proprietà CSS al tuo foglio di stile è l'ultima cosa che deve essere fatta. Naturalmente, potresti voler regolare leggermente le cose a seconda del design della tua pagina.

.responsive-map{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.responsive-map iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

E questo è tutto! Con queste semplici aggiunte di codice, avrai una mappa reattiva sul tuo sito. Non sei sicuro di voler intraprendere la strada del fai-da-te? Ora esaminiamo una semplice soluzione di plugin.

Scopri tutto il codice con questa CodePen!

Aggiunta di mappe con MapPress Easy Google Plugin

L'incorporamento manuale della mappa è un buon approccio quando ci sono solo poche mappe, ma cosa succede se devi aggiungerne molte? Ad esempio, un sito aziendale potrebbe avere più posizioni che devono essere visualizzate. L'aggiunta di ciascuna mappa individualmente potrebbe diventare un po' noiosa. È qui che torna utile un plugin. Ci sono molte ottime opzioni tra cui scegliere, ma MapPress Easy Google Maps è un'opzione che vale la pena provare (e quella che userò in questo tutorial).

Per iniziare, dovrai installare e attivare MapPress Easy Google Maps sul tuo sito WordPress.

Impostazioni del plug-in

Noterai il menu delle impostazioni del plug-in nella barra laterale dell'amministratore e noterai anche che ci sono molte opzioni fornite con MapPress, il che lo rende una soluzione flessibile per qualsiasi sito. Cose come tipo di mappa, zoom, bordo, allineamento, controlli, ecc. possono essere facilmente regolati qui.

Aggiunta della mappa

Anche in questo caso, per aggiungere la mappa, dovrai modificare un Post o una Pagina.

1. Vai su Messaggi > Aggiungi o Pagine > Aggiungi.

2. Scorri verso il basso fino alla sezione MapPress nella schermata di modifica e scegli "Nuova mappa".

3. Vedrai l'editor di MapPress in cui puoi inserire un indirizzo per la tua mappa. Anche se non hai l'indirizzo esatto, prova a inserire il nome della località e dovrebbe trovarlo per te. Se desideri condividere la tua posizione, il link "La mia posizione" consentirà al plug-in di rilevare automaticamente la tua posizione.

4. Aggiungi un titolo alla mappa e scegli la dimensione della mappa.

Nota: la larghezza della mappa può essere specificata come percentuale nell'editor della mappa o nello shortcode, rendendolo mobile friendly. L'altezza in genere rimane fissa. Se preferisci aggiungere l'altezza e la larghezza allo shortcode, sarebbe simile a questo: [mappress map width="100%" height="400"]

5. Fare clic su "Salva" e quindi su "Inserisci nel post". La mappa sarà ora nel tuo post.

6. Aggiorna o pubblica il tuo post per vedere la mappa.

Questi suggerimenti e trucchi dovrebbero fornire indicazioni e informazioni sull'integrazione di Google Maps per il tuo sito web. Indipendentemente dal fatto che le mappe vengano aggiunte manualmente o con un plug-in, avere una mappa prontamente disponibile per i tuoi utenti li aiuterà a raggiungere la posizione corretta.

Provalo su Local!

Ricorda: non dovresti mai apportare modifiche su un sito live. La nostra app di sviluppo locale gratuita ti aiuterà a semplificare il flusso di lavoro e a sperimentare in sicurezza il tuo sito. Provalo oggi!

Questo articolo è stato originariamente pubblicato il 2 febbraio 2016. È stato aggiornato l'ultima volta il 14 febbraio 2018.