Google Maps ohne Plugin in Webseite einbinden

10 2016

Google, Webdesign, WordPress

Google Maps ohne Plugin in Webseite einbinden

Es gibt unzählige Plugins, um Google Maps in eine Webseite einzubinden, da es aber nicht das gab, was wir wollten (Styling selbst bestimmen, eigener Marker mit Verlinkung, etc.) haben wir ein Script zusammengebaut, um all diese Funktionen abzubilden.

HINWEIS: Seit 2016 muss man die Maps registrieren und sich bei Google einen API-Schlüssel besorgen.

Auch der schmerzhafte „Linien-Bug“ in Safari (Linien über den Markern von der Google Map) ist hier mit ausgemerzt.

Map Styles können hier erstellt und dann ausgelesen werden: Mapstylr.com

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>
<script>
    function initialize() {

        var MY_MAPTYPE_ID = 'custom_style';

        var featureOpts = [
            {
                stylers: [
                    {hue: '#0F6EA8'},
                    {visibility: 'simplified'},
                    {gamma: 1},
                    {weight: 0.2}
                ]
            },

            {featureType:'landscape',
                elementType:'all',
                stylers:[
                    {color:'#FAFAF4'}
                ]
            }

           // Hier gern noch mehr Styles einbauen

        ];


        var mapOptions = {
            zoom: 10,
            zoomControl: true,
            scrollwheel: false,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.BIG
            },
            disableDefaultUI: true,
            center: new google.maps.LatLng(48.1, 11.35),


            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
            },
            mapTypeId: MY_MAPTYPE_ID

        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var image = 'https://www.MeineSeite.de/MeinPfadZumBilderOrdner/MainMarker.png';

        var myLatLng = new google.maps.LatLng(48.030873, 11.204291);
        var moveMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            optimized: false // SAFARI Linien raus!
        });


        var styledMapOptions = {
            name: 'Custom Style'
        };

        var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

        map.mapTypes.set(MY_MAPTYPE_ID, customMapType);


        var contentString = 'ja.do GmbH <br /><br />Schlosshof 7<br />82229 Seefeld b. München<br /><strong>08152 396 17 - 00</strong><br /><br /><a href="https://goo.gl/maps/g9SE6cW5oGQ2" target="_blank">Route auf Google</a>'; // Hier die gewünschte Adresse und oder Daten HTML-formatiert eingeben!
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        google.maps.event.addListener(moveMarker, 'click', function () {
            infowindow.open(map, moveMarker);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>