问题
Can you please take a look at This Demo and let me know why I am not able:
1- To close any open infoBox when a new one opens
2- Clear/ Remove open infoBox when user clicks on Clear button?
Here is the code I have
$(document).ready(function() {
var markers = []; // makers array
var infoBox = null;
var myOptions = { // map settings
zoom: 15,
center: new google.maps.LatLng(38.721759, -9.151692),
mapTypeId: google.maps.MapTypeId.ROADMAP,
sensor: 'true'
}
var map = new google.maps.Map(document.getElementById("canvas-map"), myOptions);
var data = [ // map data
{
id: 1,
content: '<div class="img"></div><div class="txt"><h1>THIS TITLE</h1><span>Sed posuere consectetur est at lobortis. Donec sed odio dui. Donec sed odio dui. Aenean eu leo quam.</span></div><div class="fot"></div>',
position: {
lat: 38.721759,
lng: -9.151692
}
},
{
id: 2,
content: '<div class="img"></div><div class="txt"><h1>THIS TITLE</h1><span>This is a test.</span></div><div class="fot"></div>',
position: {
lat: 38.720805,
lng: -9.146585
}
}
]
for (var i = 0; i < data.length; i++) {
var current = data[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.position.lat, current.position.lng),
map: map,
content: current.content
});
markers.push(marker);
google.maps.event.addListener(markers[i], "click", function(e) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: this.content
});
});
}
function clearMap(){
for(i=0; i<markers.length; i++){
markers[i].setMap(null);
}
markers = [];
infoBox.close();
}
$("#clear").on("click",function(){
clearMap();
});
});
As you can see I already tried
infoBox.close();
which I am getting Uncaught TypeError: undefined is not a function
for .close()
I also tried the .remove()
which removes the info box from map but when zoom in or out the box appears again at the map!
for closing the existing infobox also I tried the
if (infoBox) {
infoBox.close();
}
in the following cod but it didn't do the job either!
google.maps.event.addListener(markers[i], "click", function(e) {
if (infoBox) {
infoBox.close();
}
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: this.content
});
});
}
Thanks,
回答1:
- Your infoBox doesn't have a .close() method, use .setMap(null) instead.
- If you want to only have one InfoBox, only create one (the first time it is opened, as it needs a latlng), and move it to the appropriate marker. Requires writing a method to "move" the InfoBox
click listener that "moves" the InfoBox:
google.maps.event.addListener(markers[i], "click", function (e) {
if (!infoBox) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: this.content
});
} else {
infoBox.setOptions({
map: map,
content: this.content
});
infoBox.setPosition(this.getPosition());
}
});
/* move the InfoBox
*/
InfoBox.prototype.setPosition = function(latlng) {
this.latlng_ = latlng;
};
working fiddle
来源:https://stackoverflow.com/questions/28179773/issue-on-clearing-removing-google-maps-infobox-custom-infowindow