manuale seo gardening su amazon

Mappe Google Maps Responsive su WordPress

mappe-googole-maps-responsive-su-Wordpress
libro webmaster con wordpress

Il procedimento per integrare una mappa di Google Maps responsive sui nostri siti web è simile a quello spiegato nel precedente articolo “Video YouTube responsive su WordPress“. Ecco come procedere senza plugin.

Come incorporare una mappa di Google Maps sul sito

Il metodo classico per incorporare una mappa di Google Maps su WordPress, è quello di prelevare l’iframe del codice di incorporamento su Google Maps stesso.

Basterà portarsi su Google Maps, inserire l’indirizzo o il nome dell’attività (se già inserita) che si vuole far vedere sulla mappa  e poi seguire questi semplici passi.

  1. Fare click sul menu
  2. cliccare sulla voce “Condividi o incorpora mappa”
  3. Nella finestra che si apre, cliccare sulla TAB “Incorpora Mappa”
  4. Copiare il codice iframe
  5. Incollarlo sul sito con l’editor in modalità testo

Nelle immagini seguenti potete vedere le fasi sopra descritte.

prelevare codice incorporamento mappa google maps

prelevare codice incorporamento mappa google maps

 

come ottenere il codice di incorporamento della mappa google maps

come ottenere il codice di incorporamento della mappa google maps

 

Il codice ottenuto, da copiare nell’editor degli articoli o delle pagine di Worpdress è qualcosa simile al seguente:

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2973.6244404397644!2d12.940457915646878!3d41.81485017734847!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x13257d81ccd78e4f%3A0x7b9f6663bb579201!2sChiLoFa!5e0!3m2!1sit!2sit!4v1520234397921″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

Così com’è, la mappa non è affatto responsive, ovvero non si adatta a tutti i tipi di dispositivi utilizzati. Bisogna renderla tale.

Come adattare la mappa Google Maps a tutti i tipi di dispositivo

Ecco cosa dovete fare per rendere responsive una mappa Googoe Maps sul vostro sito, sia esso in WordPress, che costruito con altri CMS (il procedimanto non cambia).

  • Aprite l’editor della pagina o dell’articolo dove volete inserire la mappa.
  • Utilizzate l’inserimento “Testo”, anziché “Visuale”
  • Create una classe nella maniera <div class=”mappa-responsive”>
  • Inserite il codice di incorporamento della mappa, prelevato da Google Maps
  • Chiudete il div

In sostanza, sul vostro editor di testo dovreste aver scritto così:

<div class=”mappa-responsive”>

<iframe ….. IL VOSTRO CODICE DI INCORPORAMENTO …… /iframe>

</div>

Salvate.

Rendiamo Google Maps Responsive

La mappa in questo momento non sarà ancora responsive, ovvero non sarà ancora visualizzata correttamente né su smartphone, né su tablet, né su desktop. È necessario compiere un’altra operazione.

Aprite quindi il vostro foglio di stile (di solito style.css). Per chi lavora con Worpdress, andrà benissimo inserire il codice che sto per suggerire, anche nel campo CSS personalizzato che trovate in Aspetto —> Personalizza —-> CSS Aggiuntivo (o personalizzato).

Quindi qui scriverete:

.mappa-responsive {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

.mappa-responsive iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

Salvate e andate a vedere il risultato. Qui sotto il mio test con l’Agenzia Grafico Pubblicitaria Chilofa di Roma.

 

 

Incorporare la mappa Google Maps su WordPress in questa maniera, e rendendola responsive con i css invece di andare a d utilizzare i plugin, è un metodo applicabile su tutti i sistemi per costruire siti: Wordperess, Joomla, Drupal, HTML, eccetera.

Riassunto
Mappe Google Maps Responsive su WordPress
Titolo
Mappe Google Maps Responsive su WordPress
Descrizione
Il metodo classico per incorporare una mappa di Google Maps su WordPress, è quello di prelevare l'iframe del codice di incorporamento su Google Maps stesso. Per rendere responsive la mappa però c'è bisogno di un piccolo procedimento aggiuntivo. Vediamolo.
Autore
Publisher
flavioweb.net
Logo
manuale seo gardening su amazon
About the author

Flavio

Mi trovo nel campo del web dal 2006. Nel tempo mi sono specializzato soprattutto nell'indicizzazione,  nel posizionamento di siti internet e nell'utilizzo dei social media principali a fini di marketing.

Commenta per primo

Inserisci il tuo commento

La tua email non sarà pubblicata


*


*

code