1

I have a problem with adding an info window to a data layer that has data from a geojson link. as my code below will show I can't seem to get the info window to pop-up.

I have used the tutorial found on this site

here is my code, I hope you guys can help me. if something is unclear don't hesitate to ask me!

    <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: 25px;
            margin: 25px;
            border: 3px solid #000;
        }
        #legend h3 {
            margin-top: 0;
        }
        #legend img {
            vertical-align: middle;
        }
        #controls ul{
            background-color: white;
        }
    </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>
                <il><input type="checkbox" id="data_layer2"></il><img src="Markers/supermarket.png"><h3>supermarkt</h3>
                <il><input type="checkbox" id="data_layer3"></il><img src="Markers/bicycle.png"><h3>fietsenstalling</h3>
                <il><input type="checkbox" id="data_layer4"></il><img src="Markers/kiosk.png"><h3>kiosk</h3>
            </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('http://geoportaal-ddh.opendata.arcgis.com/datasets/cc985cc50ff64b13b744ddaeec613cf9_1.geojson');

            // dit is de parkeercentrum data (Met de style atribuut)
            data_layer1.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/fc8de486a74d4b66bcd84d453c5f82c4_1.geojson');
            data_layer1.setStyle({
                icon: 'Markers/parkinggarage.png',
                title: 'parkeercentrums'
            });

            // supermarkten in omgeving Den Haag (Met de style atribuut)
            data_layer2.loadGeoJson('http://geoportaal-ddh.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('http://geoportaal-ddh.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('http://geoportaal-ddh.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'
                }
            };

            var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
                '<div id="bodyContent">'+
                '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
                'sandstone rock formation in the southern part of the '+
                'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
                'south west of the nearest large town, Alice Springs; 450&#160;km '+
                '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
                'features of the Uluru - Kata Tjuta National Park. Uluru is '+
                'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
                'Aboriginal people of the area. It has many springs, waterholes, '+
                'rock caves and ancient paintings. Uluru is listed as a World '+
                'Heritage Site.</p>'+
                '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
                'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
                '(last visited June 22, 2009).</p>'+
                '</div>'+
                '</div>';


            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);

            var infowindow1 = new google.maps.infoWindow();

            data_layer1.addListener('click', function(event) {
                infowindow1.setContent(contentString);
                infowindow1.setPosition(event.feature.getGeometry().get());
                infowindow1.setOptions({pixelOffset: new google.maps.Size(0, -30)});
                infowindow1.open(map)
            });
        }


    </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>

my new code:

http://jsbin.com/qamoyepaho/edit?html,js,output

3
  • 1
    I get a javascript error with the posted code Uncaught TypeError: google.maps.infoWindow is not a constructor (javascript is case sensitive, should be InfoWindow, with a capital 'I')
    – geocodezip
    Commented Mar 7, 2018 at 14:42
  • thanks this really helped me but I still can't put a infowindow on my data layers Commented Mar 9, 2018 at 8:43
  • That typo is still in the posted code. What errors do you see in your javascript console? It works for me if I fix that error (at least on "layer1", which is the only layer that has the click listener to open the InfoWindow).
    – geocodezip
    Commented Mar 9, 2018 at 18:21

2 Answers 2

0

I changed this:

data_layer1.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/fc8de486a74d4b66bcd84d453c5f82c4_1.geojson');
data_layer1.setStyle({
  icon: 'Markers/parkinggarage.png',
  title: 'parkeercentrums'
});

to:

data_layer1.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/fc8de486a74d4b66bcd84d453c5f82c4_1.geojson', null, function() {
   addDataLayerListeners(data_layer1, 'parkeercentrums');
});
data_layer1.setStyle({
   title: 'parkeercentrums'
});

I removed the icon property from the style object because it would cause the markers to not get drawn on the map. I also specified a callback function for each loadGeoJson method call. This function is run once the Geo JSON data has finished loading. The callback function executes the addDataLayerListeners function and passes it the data layer and the title of the data layer. The addDataLayerListeners is defined as:

function addDataLayerListeners(data_layer, infoWindowContent) {
 data_layer.addListener('click', function(event) {
   infowindow.setContent(infoWindowContent);
   infowindow.setPosition(event.feature.getGeometry().get());
   infowindow.setOptions({
     pixelOffset: new google.maps.Size(0, -30)
   });
   infowindow.open(map)
 });
}

It takes in the data layer object (data_layer) and a string to be used for the content of the info window (infoWindowContent). The function adds a click event listener to the data layer object and passes infoWindowContent to the infowindow.setContent method call.

I also made the info window a global variable and instantiated it in the initMap function. At the top of the code I add

var infowindow;

and in the initMap function I add:

infowindow = new google.maps.InfoWindow();

I did this so there is only one instance of the info window on the map.

Take a look at this JSBin for a working example.

13
  • great thanks for the help. but there is one problem i need an info window with different content for mij data layers. would you hapend to know how i can manage this? Commented Mar 9, 2018 at 8:42
  • I updated my answer. Take a look and see if it solves your problem.
    – Iavor
    Commented Mar 9, 2018 at 14:20
  • I don't see the changes you made. Did you try my solution? It should do what you want now.
    – Iavor
    Commented Mar 14, 2018 at 14:02
  • i've changed my code (check link under my comment) could you find me a solution that works with my icons ;) jsbin.com/qamoyepaho/edit?html,js,output Commented Mar 14, 2018 at 14:03
  • Where are you getting your icons from? You specify Markers/parkinggarage.png but there is no Markers folder in JSBin. You need to specify a URL like efepae.gr/files4users/images/markers/supermarket.png Try replacing Markers/parkinggarage.png with the link above and it will work because the icon in the link exists.
    – Iavor
    Commented Mar 14, 2018 at 14:14
0

Yes, google.maps.infoWindow is not a constructor but google.maps.InfoWindow is.

And the infowindow1 is called from the outside, so create it there

var infowindow1;
var contentString;
function initMap() {
    [...]
    infowindow1 = new google.maps.InfoWindow();
}

document.getElementById('data_layer1').addEventListener('click', function(event) {
    infowindow1.setContent(contentString);
    infowindow1.setPosition({lat: 52.0704978, lng: 4.3006999000000405});
    infowindow1.setOptions({pixelOffset: new google.maps.Size(0, -30)});
    infowindow1.open(map)
});
1
  • thanks but this doesn't seem to work the way you showed above.im still looking for a answer where i can put an infowindow on mij datalayers instead of de map.data.... Commented Mar 9, 2018 at 8:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.