DIV-EMBED (component )

src/app/shared/components/div-embed/templates

Demo Section

Each variation will be presented in the following section.

Default (Detailseite Deutsch)

Google Maps Detailseite Deutsch

Wenn Sie diese eingebettete Google Karte (Google Maps) anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.

Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.

Für die Speicherung und Verarbeitung der Daten gilt die Datenschutzrichtlinie von Google

Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen
Unterüberschrift zur Karte

Hier dann erklärender Text zur Karte

Default (Detailseite Englisch)

Google Maps Detailseite Englisch

If you click to view this video your personal data will be transmitted to Vimeo and cookies may also be stored on your device. LMU has no influence over how any such data is transmitted or indeed over its further usage.

For the duration of your visit to the website (until you close your browser), this selection will be stored in the form of a cookie saved on your computer.

The following applies to the storage and processing of data: Google Privacy Policy

Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen

Landingpage

Google Maps Landingpage Deutsch

Wenn Sie diese eingebettete Google Karte (Google Maps) anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.

Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.

Für die Speicherung und Verarbeitung der Daten gilt die Datenschutzrichtlinie von Google

Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen
Bitte prüfen Sie den Embed-Code und stellen sie sicher, dass er vom richtigen Provider ist.
Unterüberschrift zur Karte

Hier dann erklärender Text zur Karte

Readme

divEmbed (component)

Description

This blueprint is based on the blueprint of Veams.

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/div-embed

Fields

div-embed.hbs

Settings

Parameter Type Default Description
settings.divEmbedClasses String '' Modifier classes for component, ‘is-rte-embed’ must be set for Detailpages
settings.divEmbedContextClass String 'default' Context class of component ‘default’ vor Detailpages, ‘lpage’ vor the Modul in a Landingpage
settings.divEmbedJsOptions Object null JavaScript options object which gets stringified
settings.divEmbedModuleContainerClass String '' Modifier classes for the emebd element, ‘div-embed__googlemaps-container’ for a google map embed solution
settings.divEmbedModuleInfoboxClass String '' Modifier classes for theDSGVO-Infobox, “is-googlemaps-dsgvoinfo” for a google map dsgvoinfo
settings.showCaption String not existend if the Attribute exist (“true”) a Caption area is shown

Content

Parameter Type Description
content.headline String Headline of the map
content.dsgvoinfo String 1.Sentence depending the DSGVO infos
content.dsgvoinfo2 String 2.Sentence depending the DSGVO infos
content.dsgvoinfo3 String 3.Sentence depending the DSGVO infos
content.dsgvoinfo4 String Link Text for the DSGVO-Link. In Combination with the URL in Parameter dsgvoinfolink
content.dsgvoinfolink String Link for the DSGVO-Link. In Combination with the Linktext in Parameter dsgvoinfo4
content.dsgvoconfirm String Text for the DSGVO Confirm Button
content.embedcode String Embed Code
content.captionHeadline String Sub-Headline for the map
content.captionContent String Sub-Content for the map
content.embedError String Errorinformation if the embed-Code is not correct

JavaScript Options

The module gives you the possibility to override default JS options:

Option Type Default Description

SASS

Variables

There are multiple variables which you can change:

Variable Value Description
$div-embed-my-custom-var 0px Please add a description!

Modifier Classes

There are modifier classes you can add to c-div-embed:

Modifier Description
is-modifier Please add a description!
is-googlemaps-dsgvoinfo View for a DSGVO-informationbox for Google Maps

Templates

div-embed.hbs

<div class="c-div-embed{{#if settings.divEmbedContextClass}}--{{settings.divEmbedContextClass}}{{else}}--default{{/if}}{{#if settings.divEmbedClasses}} {{settings.divEmbedClasses}}{{/if}}"
     data-css="c-div-embed"
     data-js-module="div-embed"{{#if settings.divEmbedJsOptions}}
     data-js-options='{{stringify settings.divEmbedJsOptions}}'{{/if}}>
{{#if content.headline}}<h2 class="div-embed__headline">{{content.headline}}</h2>{{/if}}
	<figure>
		<div class="div-embed__container {{#if settings.divEmbedModuleInfoboxClass}}{{settings.divEmbedModuleInfoboxClass}}{{/if}}">
			<div class="div-embed__content-container">
				<div class="div-embed__content">
					{{#if content.dsgvoinfo}}<p>{{content.dsgvoinfo}}</p>{{/if}}
					{{#if content.dsgvoinfo2}}<p>{{content.dsgvoinfo2}}</p>{{/if}}
					{{#if content.dsgvoinfo3}}<p>{{content.dsgvoinfo3}}{{/if}}{{#if content.dsgvoinfo4}} <a class="div-embed__content-link" href="{{#if content.dsgvoinfolink}}{{content.dsgvoinfolink}}{{else}}#{{/if}}" target="_blank" rel="noopener">{{content.dsgvoinfo4}}</a></p>{{/if}}
				</div>
				<div class="div-embed__button">
					<a class="div-embed__link" data-js-item="js-div-embed-googlemaps">Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen</a>
				</div>
				<div class="div-embed__clear"></div>
			</div>
		</div>

		<div class="div-embed__hidden {{#if settings.divEmbedModuleContainerClass}}{{settings.divEmbedModuleContainerClass}}{{/if}}" data-src="{{#if content.embedcode}}{{content.embedcode}}{{/if}}"></div>
		{{#if content.embedError}}
		<div class="div-embed__embederror">{{content.embedError}}</div>
		{{/if}}
		{{#if settings.showCaption}}
		<figcaption class="div-embed__caption">
			<div class="div-embed__caption-inner">
				{{#if content.captionHeadline}}
					<div class="div-embed__caption-headline">{{content.captionHeadline}}</div>
				{{/if}}
				{{#if content.captionContent}}
					<p class="div-embed__caption-content">{{content.captionContent}}</p>
				{{/if}}
			</div>
		</figcaption>
		{{/if}}
	</figure>
</div>

Data File

div-embed.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default (Detailseite Deutsch)"
			},
			"settings": {
				"divEmbedContextClass": "default",
				"divEmbedClasses": "",
				"divEmbedModuleContainerClass": "div-embed__googlemaps-container",
				"divEmbedModuleInfoboxClass": "is-googlemaps-dsgvoinfo",
				"divEmbedJsOptions": {},
				"showCaption": "true"
			},
			"content": {
				"headline": "Google Maps Detailseite Deutsch",
				"dsgvoinfo": "Wenn Sie diese eingebettete Google Karte (Google Maps) anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.",
				"dsgvoinfo2": "Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.",
				"dsgvoinfo3": "Für die Speicherung und Verarbeitung der Daten gilt die",
				"dsgvoinfo4": "Datenschutzrichtlinie von Google",
				"dsgvoinfolink": "https://policies.google.com/privacy?hl=de",
				"dsgvoconfirm": "Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen",
				"embedcode": "<iframe height='480' width='640' src='https:\/\/www.google.com\/maps\/d\/embed?mid=1z9AE5WxC4SNj9u8HtyWUuWOkFcn17cvH' style='border:none;overflow:hidden' scrolling='no' frameborder='0' allowTransparency='true' allow='encrypted-media'></iframe>",
				"captionHeadline": "Unterüberschrift zur Karte",
				"captionContent": "Hier dann erklärender Text zur Karte"
			}
		},
		"defaultEn": {
			"docs": {
				"variationName": "Default (Detailseite Englisch)"
			},
			"settings": {
				"divEmbedContextClass": "default",
				"divEmbedClasses": "",
				"divEmbedModuleContainerClass": "div-embed__googlemaps-container",
				"divEmbedModuleInfoboxClass": "is-googlemaps-dsgvoinfo",
				"divEmbedJsOptions": {}
			},
			"content": {
				"headline": "Google Maps Detailseite Englisch",
				"dsgvoinfo": "If you click to view this video your personal data will be transmitted to Vimeo and cookies may also be stored on your device. LMU has no influence over how any such data is transmitted or indeed over its further usage.",
				"dsgvoinfo2": "For the duration of your visit to the website (until you close your browser), this selection will be stored in the form of a cookie saved on your computer.",
				"dsgvoinfo3": "The following applies to the storage and processing of data:",
				"dsgvoinfo4": "Google Privacy Policy",
				"dsgvoinfolink": "https://policies.google.com/privacy?hl=de",
				"dsgvoconfirm": "Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen",
				"embedcode": "<iframe height='480' width='640' src='https:\/\/www.google.com\/maps\/d\/embed?mid=1z9AE5WxC4SNj9u8HtyWUuWOkFcn17cvH' style='border:none;overflow:hidden' scrolling='no' frameborder='0' allowTransparency='true' allow='encrypted-media'></iframe>"
			}
		},
		"lpage": {
			"docs": {
				"variationName": "Landingpage"
			},
			"settings": {
				"divEmbedContextClass": "lpage",
				"divEmbedClasses": "",
				"divEmbedModuleContainerClass": "div-embed__googlemaps-container",
				"divEmbedModuleInfoboxClass": "is-googlemaps-dsgvoinfo",
				"divEmbedJsOptions": {},
				"showCaption": "true"
			},
			"content": {
				"headline": "Google Maps Landingpage Deutsch",
				"dsgvoinfo": "Wenn Sie diese eingebettete Google Karte (Google Maps) anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.",
				"dsgvoinfo2": "Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.",
				"dsgvoinfo3": "Für die Speicherung und Verarbeitung der Daten gilt die",
				"dsgvoinfo4": "Datenschutzrichtlinie von Google",
				"dsgvoinfolink": "https://policies.google.com/privacy?hl=de",
				"dsgvoconfirm": "Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen",
				"embedcode": "<iframe height='480' width='640' src='https:\/\/www.google.com\/maps\/d\/embed?mid=1z9AE5WxC4SNj9u8HtyWUuWOkFcn17cvH' style='border:none;overflow:hidden' scrolling='no' frameborder='0' allowTransparency='true' allow='encrypted-media'></iframe>",
				"captionHeadline": "Unterüberschrift zur Karte",
				"captionContent": "Hier dann erklärender Text zur Karte",
				"embedError": "Bitte prüfen Sie den Embed-Code und stellen sie sicher, dass er vom richtigen Provider ist."
			}
		}

	}
}

Styles

div-embed.scss

/* ===================================================
component: social-embed
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-div-embed"] {
	width: 100%;
	position: relative;
	display: inline-block;


	.div-embed__content-link {
		text-decoration: none;
		color: $color-green-hc-dark;
		text-decoration: none;
		transition: color $animation-duration-std/2 $animation-easing-std;

		@include print() {
			text-decoration: underline !important;
		}

		&:focus {
			outline: none;
		}

		&:hover,
		&:focus {
			color: $color-dark;
			text-decoration: none;

			&::before {
				@include sprites-icon-arrow-black();

				transform: translateX(5px);
			}
		}

		&::before {
			@include pseudo();
			@include sprites-icon-arrow-green100();

			position: relative;
			display: inline-block;
			top: 1px;
			margin-right: 10px;
			vertical-align: unset;
			transition: transform $animation-duration-std $animation-easing-std;

			@include print() {
				display: none !important;
			}
		}

		/*
		MODIFIERS
		----------------------- */
		&.a11y-focus-key {
			@include a11y-focus-key();
		}

		&.is-external {
			color: $color-green-hc-dark;
			transition: color $animation-duration-std/3 $animation-easing-std;
			display: inline-block;

			&:focus {
				outline: none;
			}

			&:hover,
			&.a11y-focus-key {
				color: $color-dark;

				&::before {
					@include sprites-icon-externalarrow-black();
				}
			}

			&.a11y-focus-key {
				@include a11y-focus-key();
			}

			&::before {
				@include pseudo();
				@include sprites-icon-externalarrow-green100();

				position: relative;
				display: inline-block;
				top: 1px;
				margin-right: 10px;
				vertical-align: unset;
			}
		}

		&.is-internal {

			&:hover,
			&.a11y-focus-key {
				color: $color-dark;
			}

			&.a11y-focus-key {
				@include a11y-focus-key();
			}
		}
	}

	.div-embed__headline {
		@include headline-h2-styles();
	}

	.div-embed__hidden {
		display: none;
	}







	.div-embed__container {
		position: relative;
		width: 100%;
		background-color: $color-light;
		padding: 5%;

		@include bp($bp-tablet-l) {
			padding: 8% 15%;
		}

		@include print() {
			padding: 0;
		}

		&.is-googlemaps-dsgvoinfo {
			background-image: url('../media/footer/footer-map.png');
		}

	}

	.div-embed__content-container {
		position: relative;
		border: 1px solid $color-gray-border;
		padding: 15px;
		background-color: $color-white;
	}

	.div-embed__content {
		color: $color-dark;
		font-family: $font-italic;
		font-style: italic;
		padding-bottom: 20px;
		font-size: 1.6rem;
		line-height: (32/20);

		@include bp($bp-tablet-p) {
			font-size: 2rem;
		}

		@include bp($bp-desktop-l) {
		}
	}

	.div-embed__button {
		position: relative;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $color-green;
		border: 1px solid $color-green;
		transition: background-color $animation-duration-std $animation-easing-std;

		@include print() {
			display: none;
		}

		&:hover {
			background-color: $color-white;

			.div-embed__link {
				color: $color-green;

				&::before {
					@include sprites-icon-arrow-green100();
					transform: translateX(5px);
				}

				&.is-external {

					&::before {
						@include sprites-icon-externalarrow-green100();
					}
				}
			}
		}



		.div-embed__link {
			cursor: pointer;
			padding: 10px 30px 10px 50px;
			color: $color-white;
			text-decoration: none;
			font-size: 1.5rem;
			line-height: (24/15);
			letter-spacing: .028rem;
			font-family: $font-bold;
			transition: color $animation-duration-std $animation-easing-std;

			@include bp($bp-tablet-p) {
				padding: 20px 30px 20px 50px;
				font-size: 1.6rem;
				letter-spacing: .03rem;
			}

			&::before {
				@include pseudo();
				@include sprites-icon-arrow-white();

				left: 20px;
				top: calc(50% - 7px);
				transition: transform $animation-duration-std $animation-easing-std;
			}

			&.is-external {

				&::before {
					@include sprites-icon-externalarrow-white();
				}
			}

			&.a11y-focus-key {
				outline-offset: -2px;
			}
		}
	}

	.div-embed__googlemaps-container {
		position: relative;
		overflow: hidden;
		padding-bottom: 75%; /* 4:3 Aspect Ratio */
		height: 0;

		@include bp($bp-tablet-p) {
			padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
		}

		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	.div-embed__caption {
		margin-top: 5px;
		display: inline-block;
	}

	.div-embed__caption-headline {
		display: block;
		width: 100%;
		margin-left: 0;
		font-size: 1.3rem;
		line-height: (17/13);
		font-family: $font-bold;
		font-weight: 700;
		margin-top: 10px;
		margin-bottom: 0;
	}

	.div-embed__caption-content {
		width: 100%;
		flex: none;
		margin-left: 0;
		margin-top: 5px;
		margin-bottom: 0;
		font-size: 1.2rem;
		line-height: (17/12);
		font-family: $font-regular;
		font-weight: 400;
		letter-spacing: .5px;
		color: $color-dark;
	}

	.div-embed__clear{
		clear: both;
	}

	.div-embed__embederror {
		color: $color-red-light;
		padding: 20px 0px;
		font-size: 1.6rem;
		line-height: (32/20);
		font-family: $font-bold;
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-div-embed--default {
	margin-bottom: 60px;

	&.is-googlemaps-dsgvoinfo {
		@include rte-dimensions();
	}

}


/* ---------------------------------------------------
Context: lpage
--------------------------------------------------- */
.c-div-embed--lpage {
	clear: both;
	display: inline-block;
	width: 100%;
	margin: 0 auto 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
		margin-top: 0;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}

	.div-embed__headline {
		@include bp($bp-tablet-p) {
			@include grid-column-width(12);
			@include grid-push-h(0);
		}
	}
}

Scripts

div-embed.js

/**
 * Description of DivEmbed.
 * Class properties and decorators are supported.
 *
 * @module DivEmbed
 * @version v1.0.0
 *
 * @author your_name
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';

class DivEmbed extends Component {
	/**
	 * Class Properties
	 */
	$el = $(this.el);

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			selectors: {
				jsShowGoogleMaps: '[data-js-item="js-div-embed-googlemaps"]'
			},
			classes: {}
		};

		super(obj, options);
	}

	didMount() {
		console.log('Component DivEmbed mounted!');

		var cookie = document.cookie;

		if (cookie.includes('googlemaps=true')) {
			$('.is-googlemaps-dsgvoinfo').addClass('div-embed__hidden');
			var googlemaps = document.getElementsByClassName('div-embed__googlemaps-container');
			for (var i = 0; i < googlemaps.length; i++) {
				var src = googlemaps[i].dataset.src;
				src = src.replace(/\\/g, '');
				if(src.includes("iframe") && src.includes("src='https://www.google.com/maps/")) {
					googlemaps[i].innerHTML = src;
				}
			}
			setTimeout(function() {
				$('.div-embed__googlemaps-container').removeClass('div-embed__hidden');
			}, 400);
		}
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}

	// Local Handlers
	get events() {
		return {
			'{{context.EVENTS.click}} {{this.options.selectors.jsShowGoogleMaps}}':
				'jsShowGoogleMapsClick'
		};
	}

	jsShowGoogleMapsClick(e) {
		e.preventDefault();
		$('.is-googlemaps-dsgvoinfo').addClass('div-embed__hidden');
		var googlemaps = document.getElementsByClassName('div-embed__googlemaps-container');
		for (var i = 0; i < googlemaps.length; i++) {
			var src = googlemaps[i].dataset.src;
			src = src.replace(/\\/g, '');
			if(src.includes("iframe") && src.includes("src='https://www.google.com/maps/")) {
				googlemaps[i].innerHTML = src;
			} else {
				googlemaps[i].innerHTML = "";
			}
		}
		setTimeout(function() {
			$('.div-embed__googlemaps-container').removeClass('div-embed__hidden');
		}, 400);
		document.cookie = 'googlemaps=true;';
		return true;
	}
}

export default DivEmbed;

HTML Output

Default (Detailseite Deutsch)

<div class="c-div-embed--default" data-css="c-div-embed" data-js-module="div-embed" data-js-options='{}'>
	<h2 class="div-embed__headline">Google Maps Detailseite Deutsch</h2>
	<figure>
		<div class="div-embed__container is-googlemaps-dsgvoinfo">
			<div class="div-embed__content-container">
				<div class="div-embed__content">
					<p>Wenn Sie diese eingebettete Google Karte (Google Maps) anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.</p>
					<p>Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.</p>
					<p>Für die Speicherung und Verarbeitung der Daten gilt die <a class="div-embed__content-link" href="https://policies.google.com/privacy?hl&#x3D;de" target="_blank" rel="noopener">Datenschutzrichtlinie von Google</a></p>
				</div>
				<div class="div-embed__button">
					<a class="div-embed__link" data-js-item="js-div-embed-googlemaps">Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen</a>
				</div>
				<div class="div-embed__clear"></div>
			</div>
		</div>
		<div class="div-embed__hidden div-embed__googlemaps-container" data-src="&lt;iframe height&#x3D;&#x27;480&#x27; width&#x3D;&#x27;640&#x27; src&#x3D;&#x27;https://www.google.com/maps/d/embed?mid&#x3D;1z9AE5WxC4SNj9u8HtyWUuWOkFcn17cvH&#x27; style&#x3D;&#x27;border:none;overflow:hidden&#x27; scrolling&#x3D;&#x27;no&#x27; frameborder&#x3D;&#x27;0&#x27; allowTransparency&#x3D;&#x27;true&#x27; allow&#x3D;&#x27;encrypted-media&#x27;&gt;&lt;/iframe&gt;"></div>
		<figcaption class="div-embed__caption">
			<div class="div-embed__caption-inner">
				<div class="div-embed__caption-headline">Unterüberschrift zur Karte</div>
				<p class="div-embed__caption-content">Hier dann erklärender Text zur Karte</p>
			</div>
		</figcaption>
	</figure>
</div>

Default (Detailseite Englisch)

<div class="c-div-embed--default" data-css="c-div-embed" data-js-module="div-embed" data-js-options='{}'>
	<h2 class="div-embed__headline">Google Maps Detailseite Englisch</h2>
	<figure>
		<div class="div-embed__container is-googlemaps-dsgvoinfo">
			<div class="div-embed__content-container">
				<div class="div-embed__content">
					<p>If you click to view this video your personal data will be transmitted to Vimeo and cookies may also be stored on your device. LMU has no influence over how any such data is transmitted or indeed over its further usage.</p>
					<p>For the duration of your visit to the website (until you close your browser), this selection will be stored in the form of a cookie saved on your computer.</p>
					<p>The following applies to the storage and processing of data: <a class="div-embed__content-link" href="https://policies.google.com/privacy?hl&#x3D;de" target="_blank" rel="noopener">Google Privacy Policy</a></p>
				</div>
				<div class="div-embed__button">
					<a class="div-embed__link" data-js-item="js-div-embed-googlemaps">Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen</a>
				</div>
				<div class="div-embed__clear"></div>
			</div>
		</div>
		<div class="div-embed__hidden div-embed__googlemaps-container" data-src="&lt;iframe height&#x3D;&#x27;480&#x27; width&#x3D;&#x27;640&#x27; src&#x3D;&#x27;https://www.google.com/maps/d/embed?mid&#x3D;1z9AE5WxC4SNj9u8HtyWUuWOkFcn17cvH&#x27; style&#x3D;&#x27;border:none;overflow:hidden&#x27; scrolling&#x3D;&#x27;no&#x27; frameborder&#x3D;&#x27;0&#x27; allowTransparency&#x3D;&#x27;true&#x27; allow&#x3D;&#x27;encrypted-media&#x27;&gt;&lt;/iframe&gt;"></div>
	</figure>
</div>

Landingpage

<div class="c-div-embed--lpage" data-css="c-div-embed" data-js-module="div-embed" data-js-options='{}'>
	<h2 class="div-embed__headline">Google Maps Landingpage Deutsch</h2>
	<figure>
		<div class="div-embed__container is-googlemaps-dsgvoinfo">
			<div class="div-embed__content-container">
				<div class="div-embed__content">
					<p>Wenn Sie diese eingebettete Google Karte (Google Maps) anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.</p>
					<p>Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.</p>
					<p>Für die Speicherung und Verarbeitung der Daten gilt die <a class="div-embed__content-link" href="https://policies.google.com/privacy?hl&#x3D;de" target="_blank" rel="noopener">Datenschutzrichtlinie von Google</a></p>
				</div>
				<div class="div-embed__button">
					<a class="div-embed__link" data-js-item="js-div-embed-googlemaps">Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen</a>
				</div>
				<div class="div-embed__clear"></div>
			</div>
		</div>
		<div class="div-embed__hidden div-embed__googlemaps-container" data-src="&lt;iframe height&#x3D;&#x27;480&#x27; width&#x3D;&#x27;640&#x27; src&#x3D;&#x27;https://www.google.com/maps/d/embed?mid&#x3D;1z9AE5WxC4SNj9u8HtyWUuWOkFcn17cvH&#x27; style&#x3D;&#x27;border:none;overflow:hidden&#x27; scrolling&#x3D;&#x27;no&#x27; frameborder&#x3D;&#x27;0&#x27; allowTransparency&#x3D;&#x27;true&#x27; allow&#x3D;&#x27;encrypted-media&#x27;&gt;&lt;/iframe&gt;"></div>
		<div class="div-embed__embederror">Bitte prüfen Sie den Embed-Code und stellen sie sicher, dass er vom richtigen Provider ist.</div>
		<figcaption class="div-embed__caption">
			<div class="div-embed__caption-inner">
				<div class="div-embed__caption-headline">Unterüberschrift zur Karte</div>
				<p class="div-embed__caption-content">Hier dann erklärender Text zur Karte</p>
			</div>
		</figcaption>
	</figure>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link