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

 

 

 

News

  

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

Templates Demo

 

 Besuchen Sie meine
Templates Demo Seite.
 
Templates Demo richu153.jpg
 
 
 
 

Neustes Template

richu183_de

Eine neue kostenlose Vorlage für CMSimple_XH ist verfügbar.

Mit Animated Gradient Background
Free Templates richu183_de

 

Windows Tipp

Neue Rubrik Windows Tipp!

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

ausfuehren.jpg