I have couple of markers (Leaflet) in the array like
var marker1 = L.marker(...);
var marker2 = L.marker(...);
...
Added in array as
var markerArray = [];
markerArray.push(marker1);
markerArray.push(marker2);
...
And now I need to use a For loop to create a function that pans to the marker that I click. I tried this code but it doesn't work.
for (var i = 0; i < markerArray.length; i++) {
markerArray[i].on("click", function() {
mymap.panTo(markerArray[i].getLatLng());
})
};
Any help?
What you do is attaching event handlers to markers (see doc).
In your event handler, the marker is the target of the event (e.target).
for (var i = 0; i < markerArray.length; i++) {
markerArray[i].on("click", function(e) {
mymap.panTo(e.target.getLatLng());
})
};
You can write it another way to realize the i variable has no meaning in the event handler:
for (var i = 0; i < markerArray.length; i++) {
markerArray[i].on("click", markerClicked);
};
function markerClicked(e) {
mymap.panTo(e.target.getLatLng());
}
Related
I've made a simple mapbox map using the mapbox.js API and following several examples they have on their site. To display the marker location I'm calling a .geojson file, however the markers appear fairly off place even to the point that some load on top of the Ocean.
Someone said I'm calling the geojson file twice but I checked and it's being loaded once.
JS code is:
// Mapbox
L.mapbox.accessToken = 'token_here';
var mapCol = L.mapbox.map('map', 'mapbox.streets').setView([5.5, -73.249], 6);
var filters = document.getElementById('filters');
var markers = L.mapbox.featureLayer().loadURL('regions.geojson');
markers.on('ready', function(e) {
var typesObj = {},
types = [];
var features = e.target._geojson.features;
for (var i = 0; i < features.length; i++) {
typesObj[features[i].properties['description']] = true;
}
for (var key in typesObj) {
if ({}.hasOwnProperty.call(typesObj, key)) {
types.push(key);
}
}
var checkboxes = [];
for (var j = 0; j < types.length; j++) {
var item = filters.appendChild(document.createElement('div'));
var checkbox = item.appendChild(document.createElement('input'));
var label = item.appendChild(document.createElement('label'));
checkbox.type = 'checkbox';
checkbox.id = types[j];
checkbox.checked = true;
label.innerHTML = types[j];
label.setAttribute('for', types[j]);
checkbox.addEventListener('change', update);
checkboxes.push(checkbox);
}
function update() {
var enabled = {};
for (var k = 0; k < checkboxes.length; k++) {
if (checkboxes[k].checked) enabled[checkboxes[k].id] = true;
}
markers.setFilter(function(feature) {
return feature.properties['description'] in enabled;
});
}
}).addTo(mapCol);
mapCol.scrollWheelZoom.disable();
This is the issue: markers are images, and this page has a broad rule about images, saying that they should have a bottom margin. This moves the markers north, into the sea.
The issue can be fixed by making the CSS rule more precise.
I'm trying to handle mouse over listener for each marker(there are 30 markers) and to show infowindows for these markers. I created listeners for each markers but when my mouse over the some marker it shows always the last marker's infowindows. To sum up I can't listen other markers. any help would be appreciated. thanks in advance and here my code :
var listeners = [];
for(var i = 0; i < markers.length; i++){
var marker = markers[i];
var contentString = contents[i];
listeners[i] = new google.maps.event.addListener(marker, 'mouseover', function() {
var hideInfoWindows = function(){
for (var j = 0; j < util.Common.infowindows.length; j++) {
util.Common.infowindows[j].close();
}
}
var addInfoWindow = function(){
var infowindow = new google.maps.InfoWindow({
content: contentString
});
//hideInfoWindows();
util.Common.infowindows.push(infowindow);
infowindow.open(util.Common.googlemap,marker);
}
addInfoWindow();
});
}
I'm also using js cluster library but I don't think the problem is related with it.
I think your problem might be that you are not using a closure inside the cycle, and when the event listener is fired, the marker and the contentString variables are pointing to the last marker.
Try to rewrite the cycle like this:
var listeners = [];
for(var i = 0; i < markers.length; i++){
(function(index){ //create a closure, variable 'index' will take its value from variable i, but won't be affected by changed i in the outer scope
var marker = markers[index]; //use this scope's index variable instead of i
var contentString = contents[index]; //use this scope's index variable instead of i
listeners[index] = new google.maps.event.addListener(marker, 'mouseover', function() {
var hideInfoWindows = function(){
for (var j = 0; j < util.Common.infowindows.length; j++) {
util.Common.infowindows[j].close();
}
};
var addInfoWindow = function(){
var infowindow = new google.maps.InfoWindow({
content: contentString
});
//hideInfoWindows();
util.Common.infowindows.push(infowindow);
infowindow.open(util.Common.googlemap,marker);
};
addInfoWindow();
});
})(i);
}
This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 8 years ago.
I am trying to add 3 markers to a map and when click on the markers, an info window will be shown. But every array element inside google.maps.event.addListener becomes undefined.
What's the problem?
<div id="map-canvas2" style="width:100%;height:500px"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var num;
var marker;
var infoWindow;
var infoText;
var lat;
var lng;
var map;
function initialize() {
num = 3;
marker = [];
infoWindow = [];
infoText = [];
lat = [];
lng = [];
infoText[0] = "test1";
lat[0] = 22.420845;
lng[0] = 114.208705;
infoText[1] = "test2";
lat[1] = 22.416026;
lng[1] = 114.209321;
infoText[2] = "test3";
lat[2] = 22.420841;
lng[2] = 114.205188;
for (var i = 0; i < num; i++) {
marker[i]=new google.maps.Marker({
position:new google.maps.LatLng(lat[i], lng[i]),
});
infoWindow[i] = new google.maps.InfoWindow({
content:"<div>"+infoText[i]+"</div>"
});
}
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(22.420458,114.207482)
};
map = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions);
for (var i = 0; i < num; i++) {
marker[i].setMap(map);
google.maps.event.addListener(marker[i], 'click', function() {
new google.maps.InfoWindow({
content:"<div>"+infoText[i]+"</div>"
}).open(map,marker[i]);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The problem:
Each event listener is referencing the same variable i which gets incremented on each pass of the for loop. So after the loop is finished the value of i is 3, but none of your arrays have an index of 3 so you get undefined. Because each event handler is referencing the same i variable they are all referencing the same undefined array values.
The solution: Create a closure so that the event handler for each marker has a it's own variable instead sharing reference to single variable.
for (var i = 0; i < num; i++) {
marker[i].setMap(map);
google.maps.event.addListener(marker[i], 'click', (function(index) {
return function() {
new google.maps.InfoWindow({
content: "<div>"+infoText[index]+"</div>"
}).open(map, marker[index]);
}
})(i));
}
What we're doing is creating a Immediately-Invoked Function Expression "IIFE". The IIFE has a parameter called index which is set to the value of i. Because variables have function scope, index belongs only to this function. Inside the IIFE we return a function that will do the actual work when the event is triggered, but it will reference index not i.
Don't send indexed parameters to an anonymous function:
for (var i = 0; i < num; i++) {
var mrk = marker[i];
var iwContent = infoText[i];
mrk.setMap(map);
google.maps.event.addListener(mrk, 'click', function() {
new google.maps.InfoWindow({
content:"<div>"+iwContent+"</div>"
}).open(map,mrk);
});
}
I am trying to dynamically add onclick function to "li" tagged elements.
But the event does not fires.
Here is my code:
var arrSideNavButtons = [];
var sideNavLi = document.getElementsByClassName('side-nav')[0].getElementsByTagName('li');
var arrayOfSceneAudios = [scene1Audio, scene2Audio,...];
for (var i = 0; i < sideNavLi.length; i++) {
sideNavLi[i].onclick = function() {
arrayOfSceneAudios[i].play();
}
arrSideNavButtons.push(sideNavLi[i]);
}
Is it possible to code it this way?
If yes, what is my mistake?
Thanks a lot.
Wrap your onclick handler in a closure, else it only get assigned to the last elem in the loop:
for (var i = 0; i < sideNavLi.length; i++) {
(function(i) {
sideNavLi[i].onclick = function() {
arrayOfSceneAudios[i].play();
}
arrSideNavButtons.push(sideNavLi[i]);
})(i)
}
I think it's better to reuse one single function, instead of creating a new one at each iteration:
var arrSideNavButtons = [],
sideNavLi = document.getElementsByClassName('side-nav')[0].getElementsByTagName('li'),
arrayOfSceneAudios = [scene1Audio, scene2Audio,...],
handler = function() {
this.sceneAudio.play();
};
for (var i = 0; i < sideNavLi.length; i++) {
sideNavLi[i].sceneAudio = arrayOfSceneAudios[i];
sideNavLi[i].onclick = handler;
arrSideNavButtons.push(sideNavLi[i]);
}
I've got two functions:
function showMarkers() {
hotspotsIterator = 0;
for(var i = 0; i < table.length; i++) {
var obj = table[i];
if(obj && obj.marker) {
var obj = table[i];
obj.marker.setMap(map);
}
}
}
function hideMarkers() {
for(var i = 0; i < table.length; i++) {
var obj = table[i];
if(obj && obj.marker) {
obj.marker.setMap(null);
}
}
}
First is showing markers, and second is hiding them. When I first use showMarkers() there is Animation.DROP performed. But when I hide them and show again, animation is not running, and the markers are simply shown.
Can someone tell me how to re-drop markers? Without creating new instances?
EDIT:
I have already created the code to re-create the same marker and it works, but its not elegant solution at all!
And Google Docs for markers doesn't resolve the issue.
Add following code right below the obj.marker.setMap(map); : obj.marker.setAnimation(google.maps.Animation.DROP);
Here the reference: Marker Animations