On gists

Google map aka Husinec

Gmaps

map.js Raw #

// GMAP - CUSTOM STYLE
/* https://vanguardprague.psn.cz/  */
$mapStyle = [
    {
        "featureType": "all",
        "elementType": "all",
        "stylers": [
            {"saturation": "-100"},
            {"lightness": "25"},
            {"gamma": "1"}
        ]
    }
];

// GMAP - SETTINGS
var mapCenter = {lat: 50.0163867, lng: 14.4035964};

function initialize() {
    var myOptions = {
        zoom: 16,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: 0,
        streetViewControl: 0,
        sensor: 'true',
        scrollwheel: false,
        styles: $mapStyle
    }

    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, myOptions);

    // REZIDENCE
    rezidence = new google.maps.Marker({
        position: mapCenter,
        map: map,
        title: 'VANGUARD',
        icon: '/img/icons/pin.png'
    });

    // PSN
    psn = new google.maps.Marker({
        position: {lat: 50.0853655, lng: 14.4406618},
        map: map,
        title: 'PSN',
        icon: '/img/icons/map-psn.png'
    });

    var iconBase = '/img/icons/';
    var markers = []
    var markerGroups = {
        "culture": [],
        "gastronomy": [],
        "nightlife": [],
        "shopping": [],
    };

    var filterMarkers = function (category, state) {
        console.log(category);
        console.log(state);

        for (i = 0; i < markerGroups[category].length; i++) {
            var marker = markerGroups[category][i];
            marker.setVisible(state);
        }
    }

    $('.mapFilter').change(function () {
        filterMarkers($(this).data('category'), $(this).prop('checked'));
    });

    $.getJSON('/cz/poi', function (data) {
        $.each(data, function (i, value) {
            category = value.category

            var myLatlng = {lat: value.lat, lng: value.lng};
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: iconBase + value.icon,
                title: value.title.replace('<br>', ','),
                url: value.url,
                category: category = value.category,
                thumbnail: value.thumbnailUrl,
                popis: value.popis
            });
            // infowindow obsah
            var contentString = '<div class="gg-content">' +
                '<h3>' + marker.title + '</h3>' +
                '<p>' + marker.popis + '</p>' +
                '</div>';
            infowindow = new google.maps.InfoWindow({
                //content: marker.title
                content: contentString,
                maxWidth: 225
            });

            // marker + infowindow handler
            marker.addListener('click', function () {
                if (infowindow) {
                    infowindow.close();
                }
                infowindow = new google.maps.InfoWindow({
                    content: contentString,
                    maxWidth: 225
                });
                infowindow.open(map, marker);
                map.panToOffset(marker.position, 0, -200);
            });

            markers.push(marker);
            markerGroups[category].push(marker);

        });
    });
}

/* ------ */