Google Maps für Word­Press – ohne iframe

Weltkugel mit eingesteckten Fähnchen

Kar­ten auf Web­seiten sind oft als iframes ein­ge­bun­den. Das bringt eini­ge Nach­tei­le mit sich.

Ein­fach gespro­chen lassen sich über iframes Berei­che auf der eige­nen Web­seite defi­nie­ren, in denen die Inhal­te einer ande­ren Web­seite dar­ge­stellt wer­den kön­nen. So funk­tio­niert auch das Ein­bet­ten der Google Maps Kar­te in die eige­ne Web­seite. Mit einem iframe benut­zen Sie also eine frem­de Web­seite obwohl Sie die­se nicht ange­surft haben. Als Web­sei­ten­be­trei­ber haben Sie so kei­nen Ein­fluss dar­auf was in der ande­ren Web­seite dar­ge­stellt wird und wel­che Daten an die ande­re Web­seite über­mit­telt werden.

Die Lösung ist die Google Maps Java Script API. Damit bie­tet näm­lich Google selbst die Mög­lich­keit, eine Google Maps Kar­te ein­zu­bin­den. Ganz ohne iframe!

4.9/5 – (93 votes) 

Ein­bin­dung einer Google Maps Kar­te ohne iframe

Ach­tung, erwei­ter­te Kennt­nis­se des Web­sei­ten­codes notwendig!

Schritt 1: Der Google Maps API Key

Um die Google Maps API nut­zen zu kön­nen benö­ti­gen Sie eine API Key. Damit möch­te Google ver­hin­dern, dass ihre Diens­te mit über­mä­ßig vie­len Anfragen bean­sprucht wer­den. Aber kei­ne Sor­ge für die meis­ten Web­seiten rei­chen Goo­gles Beschrän­kun­gen voll­kom­men aus.

  • Gehen Sie dazu in die Google Cloud Plat­form Console
  • Wäh­len Sie ein Pro­jekt aus oder erstel­len Sie ein neues
  • Auf Con­ti­nue kli­cken um den Code zu erhalten
  • Erset­zen Sie im unten­ste­hen­den Code die Stel­le „YOUR_API_KEY“ mit dem soeben erhal­te­nen Code
Maps Java­Script API auswählen
Maps Java­Script API aktivieren
Maps Java­Script API Übersicht

Schritt 2: Ein­bin­dung ins HTML der Webseite

Suchen Sie sich nun die Stel­le an der die Kar­te ein­ge­bun­den wer­den soll und fügen Sie hier das html tag <div id="map"></div> ein.

Schritt 3: Sty­ling der Kar­te über CSS

Nun geben wir der zukünf­ti­gen Kar­te in CSS eine Höhe #map {height: 300px; } 

Schritt 4: Ein­bin­dung der Kar­ten­funk­ti­on in den PHP-Code der Webseite

Wech­seln Sie nun in die functions.php und fügen Sie fol­gen­den Code ein.

function add_googlemaps_api() { ?>
    <script>
        function initMap() {
            var myLatLng = {lat: 48.175754, lng: 11.362060};
            var map = new google.maps.Map(document.getElementById('map'), {
                center: myLatLng,
                zoom: 15
             });
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<?php }
add_action( 'wp_footer', 'add_googlemaps_api' );

Optio­nal: Anpas­sung der Orts­mar­kie­rung (roter „Pin“)

Soll­ten Sie einen indi­vi­du­el­len Pin ver­wen­den oder den Pin mit einem Label ver­se­hen wol­len muss in oben­ste­hen­den Code der Abschnitt des Mar­kers hier­mit ersetzt werden:

var marker = new google.maps.Marker({
    position: myLatLng, 
    map: map,
    label: {
        color: '#D33C30',                      //Textfarbe
        text: 'sixhop.net Webagentur',         //Text
    },
    icon: {
        labelOrigin: new google.maps.Point(103, 20),
        size: new google.maps.Size(25, 45),    //Größe des Icons
        url: './marker_red.png',               //individueller Icon
        origin: new google.maps.Point(0, 0),    
        anchor: new google.maps.Point(13, 45),
    }
});

Schreibe einen Kommentar