Einbau einer Googlemap Iframe in responsive Websites
1. Die Adresse bei Google suchen, den passenden Ausschnitt (größere Orte in der Nähe wenn Nötig) einstellten / suchen
2. Auf Teilen klicken
3. Auf Link einbetten klicken und sich dort den Link rauskopieren
4. In ein HTML Element einbauen:
<div class="responsive-map rahmen">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2460.2021900292966!2d8.11482701578557!3d51.93026547970676!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b98f4664d63b8d%3A0x7c81f7f0f9493f41!2sVenne+Media!5e0!3m2!1sde!2sde!4v1536846961192" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
ACHTUNG: Wenn beim Speichern der iframe gelöscht wird, dann muss der zuvor bei den Einstellungen (sicherheitseinstellung) bei den HTML Tags hinzugefügt werden. <iframe>
5. Anschließend in den allgemeinen Desktop-Formatierungen (Stylesheets) folgende Formatierungen ergänzen:
Die Klasse ".responsive-map" beim Selektor eingeben.
Der restliche Code(position:relative; ......) beim Eigener Code einfügen.
.responsive-map
position: relative;
padding-bottom: 56.25%; /* hier wird die Höhe eingestellt*/
padding-top: 0px;
height: 0;
overflow: hidden;
.responsive-map iframe
width:100%; height:100%; left:0; top:0; position:absolute;
6. Die Höhe wird bei padding-bottom geregelt: 56.25%
7. Prüfen wie es auf mobilen Endgeräten aussieht.