Google-Maps
Google-Maps in Webseite einbinden
Sie dürfen den Code verwenden, kopieren und ändern, auch zu kommerziellen Zwecken.
Namensnennung im Code bitte beibehalten.
/* google-maps responsive Begin / by Richard Kircher (c)2018/ www.richukunst.ch */
<!-- google-maps responsive Begin / by Richard Kircher (c)2018/ www.richukunst.ch -->
Namensnennung im Code bitte beibehalten.
/* google-maps responsive Begin / by Richard Kircher (c)2018/ www.richukunst.ch */
<!-- google-maps responsive Begin / by Richard Kircher (c)2018/ www.richukunst.ch -->
Anleitung google-maps iframe responsive in eigene Webseite einbinden.
Google Maps wird auf der ganzen Breite angezeigt.
Einbettcode ist ohne html und CSS Fehler.
Sie dürfen den Code verwenden, kopieren und ändern, auch zu kommerziellen Zwecken.
Tippen Sie in Ihre Browser Adresszeile Google Maps ein.
Fügen Sie diesen iframe-Code von Google Maps z.B. in Notepad++ ein.
Sie müssen dem Einbettungscode noch Ihr Google Maps Standort zuordnen. Auf Google Maps Adresse eingeben, Teilen anklicken und nochmals auf Karte einbetten klicken und Code kopieren. Nur den Teil nach src="https:// bis " allowfullscreen= Markieren und kopieren.
Sie müssen dem Einbettungscode noch Ihr Google Maps Standort zuordnen. Auf Google Maps Adresse eingeben, Teilen anklicken und nochmals auf Karte einbetten klicken und Code kopieren. Nur den Teil nach src="https:// bis " allowfullscreen= Markieren und kopieren.
Kopierter Code nun in den Einbettungscode kopieren zwischen src="https:// und vor " allowfullscreen=
<!-- google-maps responsive Begin / by Richard Kircher (c)2018/ www.richukunst.ch -->
<p> </p>
<div class="google-maps">
<iframe src="<-- Code von Google Maps -->" allowfullscreen="allowfullscreen"></iframe></div>
<p> </p>
<!-- google-maps responsive End / by Richard Kircher (c)2018/ www.richukunst.ch -->
Jetzt nur noch den bearbeiteten Einbettungscode kopieren und in Ihre Seite einfügen. Im Editor auf <> Quelltext oder HTML klicken und den kopierten Code einfügen und speichern.
Fügen Sie den untenstehenden Code in Ihre Stylesheet Datei ein, der Code wird Google Maps im Responsive Webdesign anzeigen.
/* google-maps responsive Begin / by Richard Kircher (c)2018/ www.richukunst.ch */
.google-maps {
background-color: #EEE;
width: 100%;
height: 100%;
margin-left:auto;
margin-right:auto;
box-shadow: 0px 13px 14px 0px rgba(50, 50, 50, 0.81);
}
.google-maps {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.google-maps {
background-color: #EEE;
width: 100%;
height: 100%;
margin-left:auto;
margin-right:auto;
box-shadow: 0px 13px 14px 0px rgba(50, 50, 50, 0.81);
}
.google-maps {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* google-maps responsive End / by Richard Kircher (c)2018/ www.richukunst.ch */
Verwendeter Einbettungscode:
<!-- google-maps responsive Begin / by Richard Kircher (c)2018/ www.richukunst.ch -->
<p> </p>
<div class="google-maps"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3062.967514944839!2d7.6351885156614525!3d46.78215435255625!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478fb314f32177b7%3A0x4bcfaf1df957312c!2sKlosternhalde+1A%2C+3612+Steffisburg!5e1!3m2!1sde!2sch!4v1458131361730" allowfullscreen="allowfullscreen"></iframe></div>
<p> </p>
<!-- google-maps responsive End / by Richard Kircher (c)2018/ www.richukunst.ch -->
<p> </p>
<div class="google-maps"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3062.967514944839!2d7.6351885156614525!3d46.78215435255625!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478fb314f32177b7%3A0x4bcfaf1df957312c!2sKlosternhalde+1A%2C+3612+Steffisburg!5e1!3m2!1sde!2sch!4v1458131361730" allowfullscreen="allowfullscreen"></iframe></div>
<p> </p>
<!-- google-maps responsive End / by Richard Kircher (c)2018/ www.richukunst.ch -->
