Diese Webseite verwendet Cookies! Weitere Informationen finden Sie in der Datenschutzerklärung. Datenschutzerklärung.

home sitemap mailform print Impressum

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 -->

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.

google_maps2.jpg

google_maps1.jpg

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.

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 responsive End / by Richard Kircher (c)2018/ www.richukunst.ch */
 

Im Editor auf <> Quelltext oder HTML klicken und den kopierten Beispielcode einfügen und speichern.

<!-- 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 -->

 

 

News

 

 
Templats Download für
CMSimple_XH
 
 
Webseiten Tipp: Fitness-Studio in Steffisburg.
www.silvergym.ch

 

Templates Demo

 
Besuchen Sie meine
Templates Demo Seiten.
 
Templates Demo richukunst
 
 
 

 

Neustes Template

 richu201_de

Eine neue kostenlose Vorlage für CMSimple_XH ist verfügbar.
Free Templates richu201_de
 
richu201_de.png

 

Windows Tipp

 
Windows Tipp!

Erster Tipp, Anleitung, Windows 10, Herunterfahren, Neustart.

ausfuehren.jpg