Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
  <title>Google Maps IKGEO</title>
​
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
​
    <style>
        #map {
            height: 100%;
        }
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #4CAF50;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover:not(.active) {
            background-color: #111;
        }
        .active {
            background-color: #4CAF50;
        }
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #333;
            color: aliceblue;
            text-align: center;
        }
        #legend {
            font-family: Arial, sans-serif;
            background: #fff;
            padding: 10px;
            margin: 10px;
            border: 3px solid #000;
        }
        #legend h3 {
            margin-top: 0;
        }
        #legend img {
            vertical-align: middle;
        }
        #controls ul{
            background-color: white;
            display: inline-block;
        }
        #controls h3{
            display: inline-block;
        }
​
    </style>
</head>
​
<body>
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li style="float:right"><a class="active" href="about.html">About</a></li>
    </ul>
    <div id="map"></div>
    <div id="legend">
        <h2>Legend</h2>
        <div id="controls">
            <ul>
                <il><input type="checkbox" id="data_layer1"></il><img src="Markers/parkinggarage.png"><h3>Parkeerplaats</h3><br>
                <il><input type="checkbox" id="data_layer2"></il><img src="Markers/supermarket.png"><h3>supermarkt</h3><br>
                <il><input type="checkbox" id="data_layer3"></il><img src="Markers/bicycle.png"><h3>fietsenstalling</h3><br>
                <il><input type="checkbox" id="data_layer4"></il><img src="Markers/kiosk.png"><h3>kiosk</h3><br>
            </ul>
        </div>
    </div>
    <script>
​
        var map;
        var checkbox1 = document.getElementById("data_layer1");
        var checkbox2 = document.getElementById("data_layer2");
        var checkbox3 = document.getElementById("data_layer3");
        var checkbox4 = document.getElementById("data_layer4");
​
        function initMap() {
            // centrum van de map wanneer deze geladen wordt met een zoom van 12
            var mapOptions = {
                center: {lat: 52.0704978, lng: 4.3006999000000405},
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                styles: [
                    {
                        stylers: [
                            {hue: '#fff300'},
                            {invert_lightness: true},
                            {saturation: -100},
                            {lightness: 33},
                            {gamma: 0.5}
                        ]
                    }, {
                        featureType: 'poi.business',
                        elementType: ' labels.icon',
                        stylers: [
                            {visibility: 'on'},
                            {hue: '#fff300'},
                            {lightness: -15},
                            {saturation: 99}
                        ]
                    }, {
                        featureType: 'water',
                        elementType: 'geometry',
                        stylers: [
                            {color: '#456596'},
                            {lightness: 15}
                        ]
                    }, {
                        featureType: 'transit.station.rail',
                        elementType: 'labels.text.stroke',
                        stylers: [
                            {visibility: 'on'},
                            {color: '#FF6666'}
                        ]
                    }, {
                        featureType: 'poi',
                        elementType: 'geometry',
                        stylers: [
                            {visibility: 'on'},
                            {lightness: -10}
                        ]
                    }, {
                        featureType: 'road.local',
                        elementType: 'geometry.fill',
                        stylers: [
                            {visibility: 'on'},
                            {hue: '#FFF333'},
                            {lightness: 30},
                            {saturation: 99}
                        ]
                    }
                ]
            };
​
            map = new google.maps.Map(document.getElementById('map'), mapOptions);
            // variabelen om de datastyle aan te passen per geoJson file
            var data_layer1 = new google.maps.Data({map: map});
            var data_layer2 = new google.maps.Data({map: map});
            var data_layer3 = new google.maps.Data({map: map});
            var data_layer4 = new google.maps.Data({map: map});
​
            // dit is de wijkgrenzen data (geen style nodig)
            map.data.loadGeoJson('https://opendata.arcgis.com/datasets/cc985cc50ff64b13b744ddaeec613cf9_2.geojson');
​
            // dit is de parkeercentrum data (Met de style atribuut)
            data_layer1.loadGeoJson('https://opendata.arcgis.com/datasets/86d5beaba03f4dc4b8e603687aa483e9_3.geojson');
            data_layer1.setStyle({
                icon: 'Markers/parkinggarage.png',
                title: 'parkeercentrums'
            });
​
            // supermarkten in omgeving Den Haag (Met de style atribuut)
            data_layer2.loadGeoJson('https://opendata.arcgis.com/datasets/d94624fffb6049718469f6f361863f92_0.geojson');
            data_layer2.setStyle({
                icon: 'Markers/supermarket.png',
                title: 'supermarkt'
            });
​
            // fietsenstalling in omgeving Den Haag (Met de style atribuut)
            data_layer3.loadGeoJson('https://opendata.arcgis.com/datasets/3ced9e81a5e048cebb989a64e12037b0_0.geojson');
            data_layer3.setStyle({
                icon: 'Markers/bicycle.png',
                title: 'fietsenstalling'
            });
​
            // kiosks en straat markten (Met de style atribuut)
            data_layer4.loadGeoJson('https://opendata.arcgis.com/datasets/e070456a09a942acbee3927f30174114_5.geojson');
            data_layer4.setStyle({
                icon: 'Markers/kiosk.png',
                title: 'kiosk en markt',
                type: 'kiosk en markt'
            });
​
            var icons = {
                parking: {
                    name: 'Parkingcentrum',
                    icon: 'Markers/parkinggarage.png'
                },
                supermarkten: {
                    name: 'supermarkten',
                    icon: 'Markers/supermarket.png'
                },
                kiosk: {
                    name: 'kiosk en markt',
                    icon: 'Markers/kiosk.png'
                },
                fietsenstalling: {
                    name: 'fietsenstalling',
                    icon: 'Markers/bicycle.png'
                }
            };
​
            checkbox1.checked = true;
            checkbox2.checked = true;
            checkbox3.checked = true;
            checkbox4.checked = true;
​
            checkbox1.onclick = function () {
                if (!this.checked) {
                    data_layer1.setMap(null);
                }
                else {
                    data_layer1.setMap(map);
                }
            };
​
            checkbox2.onclick = function () {
                if (!this.checked) {
                    data_layer2.setMap(null);
                }
                else {
                    data_layer2.setMap(map);
                }
            };
​
            checkbox3.onclick = function () {
                if (!this.checked) {
                    data_layer3.setMap(null);
                }
                else {
                    data_layer3.setMap(map);
                }
            };
​
            checkbox4.onclick = function () {
                if (!this.checked) {
                    data_layer4.setMap(null);
                }
                else {
                    data_layer4.setMap(map);
                }
            };
​
            map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
        }
​
​
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVbOZ-baAJyXl2XwA3pTMskXrOmEEizEM&callback=initMap" async defer>
    </script>
​
    <div class="footer">
        <p> Disclaimer alle data is open source en is toegestemd voor gebruik </p>
    </div>
</body>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers