Goog­le Maps für Wor­d­Press ohne Iframe

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

Ein­fach gespro­chen las­sen 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 Goog­le 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 wer­den.

Goog­le selbst bie­tet die Mög­lich­keit eine Goog­le Maps Kar­te ein­zu­bin­den, ganz ohne iframe!

Die Lösung ist die Goog­le Maps Java Script API.

Um die Goog­le Maps API nut­zen zu kön­nen benö­ti­gen Sie eine API Key. Damit möch­te Goog­le 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­g­les Beschrän­kun­gen voll­kom­men aus.

  • Gehen Sie dazu in die Goog­le Cloud Plat­form Con­so­le
  • Wäh­len Sie ein Pro­jekt aus oder erstel­len Sie ein neu­es
  • Auf Con­ti­nue kli­cken um den Code zu erhal­ten
  • Erset­zen Sie im unten­ste­hen­den Code die Stel­le „YOUR_API_KEY“ mit dem soeben erhal­te­nen Code

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.

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

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_head', 'add_googlemaps_api' );

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 wer­den:

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),
    }
});
Goog­le Maps für Wor­d­Press ohne Iframe
5 (100%) 1 Bewertung[en]

Letz­te Arti­kel von Lau­ra Hal­ler (Alle anzei­gen)

    Schreibe einen Kommentar