Google-Maps mit einfachem Opt-in

Google-Maps mit einfachem Opt-in

Der einfachste Weg, Google Maps innerhalb einer Webpräsenz einzubinden, ist der direkte Export der Karte als iframe. Man braucht keinen API-Access, muss diese nicht ansteuern und kein Script schreiben.

Schwierig ist dabei die Sache mit der DSGVO. Als iframe eingebettet, wird sofort beim Laden der Webseite Kontakt zu den Google Servern aufgenommen und ungefragt Daten in die USA übertragen. Darüber hinaus lädt Google Maps noch Google Webfonts, welche sogar schon abgemahnt werden. Warum nur Google Webfonts ins Visier der Anwälte gekommen ist und sämtliche andere US-Dienste nicht, kann mir momentan auch noch keiner beantworten. Ebenso müssen die Webfonts auch in die Datenschutzerklärung einer Webpräsenz - auch wenn sie komplett autark auf der Domain der Webpräsenz gehostet werden und keine Kommunikation mit irgendwelchen anderen Servern stattfindet. Naturgesetze gelten immer und folgen der Logik - andere Gesetze muss ich wohl nicht verstehen.

Egal. Hier ein kleines Script, bei dem beim Laden der Webseite nur ein lokal gehostetes Bild und Text angezeigt wird. Erst nach Benutzerinteraktivität wird bei Bedarf Google Maps nachgeladen.

Stylesheet:

.ce-google-maps {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 1x1 */
}

.ce-google-maps > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.ce-google-maps .gmap-opt-in-wrap {
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(GoogleMaps_1x1.jpg);
}

@media screen and (min-width:481px) {
    .ce-google-maps {
        padding-bottom: 66.6666%; /* 3x2*/
    }
    .ce-google-maps .gmap-opt-in-wrap {
        background-image: url(GoogleMaps_3x2.jpg);
    }
}

@media screen and (min-width:769px) {
    .ce-google-maps {
        padding-bottom: 56.25%; /* 16x9*/
    }
    .ce-google-maps .gmap-opt-in-wrap {
        background-image: url(GoogleMaps_16x9.jpg);
    }
}

@media screen and (min-width:1280px) {
    .ce-google-maps {
        padding-bottom: 42.8571%; /* 21x9*/
    }
    .ce-google-maps .gmap-opt-in-wrap {
        background-image: url(GoogleMaps_21x9.jpg);
    }
}

.ce-google-maps .gmap-opt-in-button-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.3);
}

.ce-google-maps .gmap-opt-in-button {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    cursor: pointer;
    width: 80%;
    max-width: 20em;
    color: rgb(20%,20%,20%);
    background-color: rgba(255,255,255,0.9);
    padding: 0.5em;
    border-radius: 0.5em;
}

.ce-google-maps .gmap-opt-in-button div:first-child {
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
}

.ce-google-maps .gmap-opt-in-button div:last-child {
    font-size: 80%;
    line-height: 1.3;
}

HTML-Markup:

<div class="ce-google-maps" id="gmap-opt-in">
    <div class="gmap-opt-in-wrap">
        <div class="gmap-opt-in-button-wrap">
            <div class="gmap-opt-in-button">
                <div>Karte anzeigen</div>
                <div>Bitte klicken Sie, um die interaktive Google Map anzuzeigen. Dabei werden personenbezogene Daten wie Ihre IP-Adresse an Google in den USA übertragen.</div>
            </div>
        </div>
    </div>
</div>

JavaScript:

(function (d) {
    var container = d.querySelector("#gmap-opt-in"),
        wrap = d.querySelector("#gmap-opt-in .gmap-opt-in-wrap"),
        btn = d.querySelector("#gmap-opt-in .gmap-opt-in-button"),
        iframe = d.createElement("iframe"),
        gmapSrc = "https://www.google.com/maps/embed..."; // src-attribute from google maps iframe export

    btn.addEventListener("click", function () {
        // set iframe attributes
        iframe.setAttribute("style", "border:0;");
        iframe.setAttribute("src", gmapSrc);
        iframe.setAttribute("frameborder", "0");

        // remove all in container
        container.removeChild(wrap);

        // add iframe to container
        container.appendChild(iframe);
    }, false);
})(document);