Google Maps Karte als iFrame einbinden
24 August 2013 | Internet/ PC | 0
Es gibt viele Möglichkeiten, eine Google Maps Karte in seiner Webseite einzubinden. Ich wollte es einfach halten, deswegen habe ich mich für mein MeLog für eine iFrame Variante entschieden. Als Basis Parameter hierzu sollen die Geo Informationen dienen, die ich aus meinem Foursquare Rss Feed bekomme.
<iframe width="690" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" '+'src="https://maps.google.com/maps?q=loc:'+longitude+','+latitude+'&z=14&t=m&output=embed&iwloc=1"></iframe>
EInfach in eurem Code die longitude und latitude durch eure Variablen oder Werte austauschen, für meine Lieblingspizzaria, die Pizzaria Capri in Hof, würde das z.B. so aussehen:
<iframe width="690" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=loc:50.31757459783452,11.913453646187358&z=14&t=m&output=embed&iwloc=1"></iframe>
Und schon hättet ihr folgendes in eurer Webseite:
Ähnlich funktioniert das auch, wenn ihr eine Adresse habt und diese als Input nutzen wollt, bei mir würde das so aussehen:
<iframe width="690" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=Hasenberglstrasse+28+80935+muenchen&z=15&t=m&output=embed&iwloc=A"></iframe>
Was dann so in der Webseite erscheinen würde:
Die Breite und Höhe des iFrames könnt ihr natürlich auch an eure Wünsche anpassen. Falls ihr die Karte noch etwas anders gestalten möchtet, dann habt ihr mit diesem kleinen Codeschipsel noch folgende Möglichkeiten:
- z=xx -> xx ist der Zoomfaktor (kann man von 3 - 18 angeben)
- t= -> m = Maps, k = Satellite
- iwloc=1 -> schaltet hier den Info Bubble beim Marker aus
- iwloc=A -> zeigt den Info Bubble an, ist bei kleineren Karten aber unübersichtlich
noch keine Kommentare vorhanden