Blog

Google map: come centrare il popup all’interno dell’iframe

A chi non è capitato di dover inserrie all’interno di una pagina “azienda” o contatti” una mappa di google?

Come saprai ci sono molti modi per ptoerla inserire, ma di certo il più veloce è inserirla attraverso un iframe che google stesso fonrisce.

Molte volte però c’è un problema: la mappa si visualizza correttamente ma il popup con i dati dell’azienda che si apre non è cnetrato e non viene visualizzato correttamente.

Per fortuna c’è un rimedio!

Esempio di iFrame con popup decentrato


Visualizzazione ingrandita della mappa

Come risolvere il problema

1 – Inserisci il tuo iframe

[html]<iframe src="https://www.google.com/maps?sll=37.98335240164977,-124.00637328101601&sspn=32.888771077026284,50.98669402707603&t=m&q=Google+Inc.,+Amphitheatre+Parkway,+Mountain+View,+California&dg=opt&ie=UTF8&hq=Google+Inc.,+Amphitheatre+Parkway,+Mountain+View,+California&ll=37.422139,-122.08398&spn=0.017723,0.032015&output=embed" height="350" width="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<small><a style="color: #0000ff; text-align: left;" href="https://www.google.com/maps?sll=37.98335240164977,-124.00637328101601&sspn=32.888771077026284,50.98669402707603&t=m&q=Google+Inc.,+Amphitheatre+Parkway,+Mountain+View,+California&dg=opt&ie=UTF8&hq=Google+Inc.,+Amphitheatre+Parkway,+Mountain+View,+California&ll=37.422139,-122.08398&spn=0.017723,0.032015&source=embed">Visualizzazione ingrandita della mappa</a></small>[/html]

2 – Modifica i parametri

Aggiungi (somma) 0.006 alla latitudine.

La latitudine è il primo valore che trovi nel codice src dell’iframe, nello specifico:

ll=37.422139,-122.08398

Quindi: 37.422139 + 0.006 = 37.428139

E nel codice: ll=37.428139,-122.08398

NB Se la mappa non si centra perfettamente, aumenta o diminuisci il valore da sommare (nel mio caso 0.006)

3 – Fatto! Il popup è centrato!


Visualizzazione ingrandita della mappa

Codice iframe aggiornato:

[html]<iframe src="https://www.google.com/maps?sll=37.98335240164977,-124.00637328101601&sspn=32.888771077026284,50.98669402707603&t=m&q=Google+Inc.,+Amphitheatre+Parkway,+Mountain+View,+California&dg=opt&ie=UTF8&hq=Google+Inc.,+Amphitheatre+Parkway,+Mountain+View,+California&ll=37.428139,-122.08398&spn=0.017723,0.032015&output=embed" height="350" width="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<small><a style="color: #0000ff; text-align: left;" href="https://www.google.com/maps?sll=37.98335240164977,-124.00637328101601&sspn=32.888771077026284,50.98669402707603&t=m&q=Google+Inc.,+Amphitheatre+Parkway,+Mountain+View,+California&dg=opt&ie=UTF8&hq=Google+Inc.,+Amphitheatre+Parkway,+Mountain+View,+California&ll=37.422139,-122.08398&spn=0.017723,0.032015&source=embed">Visualizzazione ingrandita della mappa</a></small>[/html]

Conclusioni

Ci sono vari modi per aggiungere la mappa di google, ma di certo l’iframe è il metodo più veloce. In questo modo facile e veloce potrete risolvere il vostro problema! E a voi è mai capitato?


Se hai trovato questo articolo interessante, iscriviti alla nostra newsletter per restare aggiornato sulle prossime novità di 1604lab!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Andrea Sacca'
Corso Magento
Categories
Ultimo progetto Realizzato
Realizzazione sito web Star Diesel

Star Diesel

Restyling completo sito web

Continua a leggere »
Seguici sui Social Network!
Resta aggiornato!

Iscriviti alla nostra newsletter per ricevere news sul mondo del web e aggiornamenti su 1604lab!



Interessato ai nostri servizi?

Chiamaci al n° +39 06 7810985 oppure compila il form che segue per parlare del tuo progetto!

Utilizza il box che segue per inserire maggiori informazioni sulla tua richiesta.