Ihre Webseite

Integration von Rundgängen

  • Öffnen Sie Google Maps und suchen Sie Ihr Unternehmen. Sollten Sie noch nicht als Inhaber eingetragen sein, klicken Sie auf "als Inhaber eintragen" und füllen anschließend Ihre Firmendaten aus
  • Klicken Sie auf ein Foto, danach erscheint eine Spalte mit Vorschaubildern. Wählen Sie ein Bild mit einem 360° Symbol aus. Danach klicken Sie auf die 3 Punkte in der Bildbeschreibung und wählen im Menü "Bild teilen oder einbetten"
  • Wählen Sie den Tab Bild einbetten und kopieren Sie den Code in die Zwischenablage. Danach fügen Sie den HTML Code einfach Ihrer Webseite hinzu. Fertig

CSS Code

Responsive iFrame Design ©Bootstrap


.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
				

/* Seitenverhältnis 21:9 ============*/

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

/* Seitenverhältnis 16:9 ============*/

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

/* Seitenverhältnis 4:3 =============*/

.embed-responsive-4by3::before {
  padding-top: 75%;
}

/* Seitenverhältnis 1:1 =============*/

.embed-responsive-1by1::before {
  padding-top: 100%;
}

Beispiel


<!-- eingebetteter iFrame mit Seitenverhältnis 16:9 -->

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.google.com/maps/embed?pb=!1m0!4v1506798052044!6m8!…"></iframe>
</div>




Zurück