I have created a map http://userpages.flemingc.on.ca/~eluli/example3.html When the layers are turned on, I click on them to see the InfoWindow. As you can see from the link, the InfoWindows do not automatically close when I click on an another layer.
My JavaScript code is as follows. The problem lies in // Pop-up window. I don't have the above issue when I enable this code. However, then the map shows up with all the layers turned on (even though in the legend they are not checked off). This is not something that I want. I want the initial map to have no layers on so that the users themselves can toggle with the layers. And the InfoWindows to close automatically when I click on another layer.
var map, layer2, layers;
layers = [];
function initialize() {
var ontario = new google.maps.LatLng(49.2867873, -84.7493416);
var mapOptions = {
zoom: 5,
center: ontario,
styles: [{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#7dcdcd"}]}]
}
var infoWindow = new google.maps.InfoWindow();
var openInfoWindow = function (KMLevent) {
infoWindow.close();
infoWindow.setOptions(
{
content: KMLevent.featureData.infoWindowHtml,
position: KMLevent.latLng,
pixelOffset: KMLevent.pixelOffset
});
infoWindow.open(map);
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var kmlOptions = {
suppressInfoWindows: true, // do not to display an info window when clicked
preserveViewport: false,
map: map
};
//Layer 0 is NDP
layers [0] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkRGo1RlpVVW4td1k&export=download',
{preserveViewport: false, suppressInfoWindows: false});
//Layer 1 is Liberal
layers [1] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdXd6aWFZc05uaWM&export=download',
{preserveViewport: false, suppressInfoWindows: false});
//Layer 2 is PC1
layers [2] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkYjhLenRqVWVuR0U&export=download',
{preserveViewport: true, suppressInfoWindows: false});
// Layer 3 PC2
layers [3] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSlJZSDR2MzBOY1E&export=download',
{preserveViewport: true, suppressInfoWindows: false});
//Layer 4 PC3
layers [4] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSjNrck1MZmMydlE&export=download',
{preserveViewport: true, suppressInfoWindows: false});
//layer 5 Schools
layers [5] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkVGZ0OW1VZTR0LVE&export=download',
{preserveViewport: false, suppressInfoWindows: false});
//layer 6 Company general
layers [6] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkUHRVN0Y4TVdINjg&export=download',
{preserveViewport: false, suppressInfoWindows: false});
//layer 7 Company Size
layers [7] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkM19nVzdENlNIVEk&export=download',
{preserveViewport: false, suppressInfoWindows: false});
//layer 8 Company Exports and Revenues
layers [8] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkUXZQOUxQd0UyWDQ&export=download',
{preserveViewport: false, suppressInfoWindows: false});
//layer 9 Company New Hires & Growth
layers [9] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkeHIzZi00M3dHLXc&export=download',
{preserveViewport: false, suppressInfoWindows: false});
//layer 10 Company Tax Impact
layers [10] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vka0NMc1NSbjhyemc&export=download',
{preserveViewport: false, suppressInfoWindows: false});
for (var i = 0; i < layers.length; i++) {
layers[i].setMap(null);
}
// Pop-up window -- Here is the problem!
/*layers.forEach(function(url) {
var layer = new google.maps.KmlLayer(url, kmlOptions);
layer.setMap(map);
google.maps.event.addListener(layer, "click", openInfoWindow);
});*/
}
function toggleLayer(i) {
if (layers[i].getMap() === null) {
layers[i].setMap(map);
}
else {
layers[i].setMap(null);
}
}
//initialize();
google.maps.event.addDomListener(window, 'load', initialize);
My CSS:
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
#checkboxes {
position: absolute;
top: 30px;
right: 10px;
font-family: 'arial', 'sans-serif';
font-size: 14px;
background-color: white;
border-width:2px;
border-style:groove;
}
My HTML:
<div id="checkboxes">
<input type="checkbox" id="layer0" onclick="toggleLayer(0)">NDP <br>
<input type="checkbox" id="layer1" onclick="toggleLayer(1)">Liberal <br>
<input type="checkbox" id="layer2" onclick="toggleLayer(2);toggleLayer(3);toggleLayer(4);">PC <br>
<input type="checkbox" id="layer5" onclick="toggleLayer(5)">Schools <br>
<input type="checkbox" id="layer6" onclick="toggleLayer(6)">Company (General) <br>
<input type="checkbox" id="layer7" onclick="toggleLayer(7)">Company Size <br>
<input type="checkbox" id="layer8" onclick="toggleLayer(8)">Company Exports & Revenues <br>
<input type="checkbox" id="layer9" onclick="toggleLayer(9)">Company new Hires & Job Growth <br>
<input type="checkbox" id="layer10" onclick="toggleLayer(10)">Company Tax Impact
</div>
To get the infowindows to close when you click on another layer, set suppressInfowindows:true
, then add a click listener to each layer that calls your openInfoWindow
function. Declare a single global InfoWindow for all the layers to use.
for (var i = 0; i < layers.length; i++) {
layers[i].setMap(null);
google.maps.event.addListener(layers[i], "click", openInfoWindow);
}
code snippet:
var map, layer2, layers; layers = []; var infoWindow = new google.maps.InfoWindow(); function initialize() { var ontario = new google.maps.LatLng(49.2867873, -84.7493416); var mapOptions = { zoom: 5, center: ontario, styles: [{ "featureType": "landscape.natural", "elementType": "geometry.fill", "stylers": [{ "visibility": "on" }, { "color": "#e0efef" }] }, { "featureType": "poi", "elementType": "geometry.fill", "stylers": [{ "visibility": "on" }, { "hue": "#1900ff" }, { "color": "#c0e8e8" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "lightness": 100 }, { "visibility": "simplified" }] }, { "featureType": "road", "elementType": "labels", "stylers": [{ "visibility": "off" }] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [{ "visibility": "on" }, { "lightness": 700 }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "color": "#7dcdcd" }] }] }; var openInfoWindow = function(KMLevent) { infoWindow.close(); infoWindow.setOptions({ content: KMLevent.featureData.infoWindowHtml, position: KMLevent.latLng, pixelOffset: KMLevent.pixelOffset }); infoWindow.open(map); }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var kmlOptions = { suppressInfoWindows: true, // do not to display an info window when clicked preserveViewport: false, map: map }; //Layer 0 is NDP layers[0] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkRGo1RlpVVW4td1k&export=download', { preserveViewport: false, suppressInfoWindows: true }); //Layer 1 is Liberal layers[1] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdXd6aWFZc05uaWM&export=download', { preserveViewport: false, suppressInfoWindows: true }); //Layer 2 is PC1 layers[2] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkYjhLenRqVWVuR0U&export=download', { preserveViewport: true, suppressInfoWindows: true }); // Layer 3 PC2 layers[3] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSlJZSDR2MzBOY1E&export=download', { preserveViewport: true, suppressInfoWindows: true }); //Layer 4 PC3 layers[4] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSjNrck1MZmMydlE&export=download', { preserveViewport: true, suppressInfoWindows: true }); //layer 5 Schools layers[5] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkVGZ0OW1VZTR0LVE&export=download', { preserveViewport: false, suppressInfoWindows: true }); //layer 6 Company general layers[6] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkUHRVN0Y4TVdINjg&export=download', { preserveViewport: false, suppressInfoWindows: true }); //layer 7 Company Size layers[7] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkM19nVzdENlNIVEk&export=download', { preserveViewport: false, suppressInfoWindows: true }); //layer 8 Company Exports and Revenues layers[8] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkUXZQOUxQd0UyWDQ&export=download', { preserveViewport: false, suppressInfoWindows: true }); //layer 9 Company New Hires & Growth layers[9] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkeHIzZi00M3dHLXc&export=download', { preserveViewport: false, suppressInfoWindows: true }); //layer 10 Company Tax Impact layers[10] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vka0NMc1NSbjhyemc&export=download', { preserveViewport: false, suppressInfoWindows: true }); for (var i = 0; i < layers.length; i++) { layers[i].setMap(null); google.maps.event.addListener(layers[i], "click", openInfoWindow); } } function toggleLayer(i) { if (layers[i].getMap() === null) { layers[i].setMap(map); } else { layers[i].setMap(null); } } //initialize(); google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px; } #checkboxes { position: absolute; top: 30px; right: 10px; font-family: 'arial', 'sans-serif'; font-size: 14px; background-color: white; border-width: 2px; border-style: groove; }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div> <div id="checkboxes"> <input type="checkbox" id="layer0" onclick="toggleLayer(0)" />NDP <br> <input type="checkbox" id="layer1" onclick="toggleLayer(1)" />Liberal <br> <input type="checkbox" id="layer2" onclick="toggleLayer(2);toggleLayer(3);toggleLayer(4);" />PC <br> <input type="checkbox" id="layer5" onclick="toggleLayer(5)" />Schools <br> <input type="checkbox" id="layer6" onclick="toggleLayer(6)" />Company (General) <br> <input type="checkbox" id="layer7" onclick="toggleLayer(7)" />Company Size <br> <input type="checkbox" id="layer8" onclick="toggleLayer(8)" />Company Exports & Revenues <br> <input type="checkbox" id="layer9" onclick="toggleLayer(9)" />Company new Hires & Job Growth <br> <input type="checkbox" id="layer10" onclick="toggleLayer(10)">Company Tax Impact</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.