Benvenuto in 1604lab

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!

Categories
Ultimo progetto Realizzato
Realizzazione sito web Star Diesel

Star Diesel

Restyling completo sito web

Continua a leggere »
Seguici sui Social Network!

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.