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
Related
var infiniteResponseAAA= {
Poodwaddle_com: '"Poodwaddle.com", infiniteResponse[1].children[language].children[17].innerHTML, "Images\poodwaddle.com.jpg", searchBResponse[1].children[17].textContent',
SystemRequirementsLab_com: '"System Requirements Lab.com", infiniteResponse[1].children[language].children[18].innerHTML, "Images\systemrequirementslab.com.jpg", searchBResponse[1].children[18].textContent',
BrowsePad: '"BrowsePad.org", infiniteResponse[1].children[language].children[19].innerHTML, "Images\BrowsePad.org.jpg", searchBResponse[1].children[19].textContent',
SMMRY_com: '"SMMRY.com", infiniteResponse[1].children[language].children[20].innerHTML, "Images\smmry.com.jpg", searchBResponse[1].children[20].textContent',
Whatthefuckshouldimakefordinner_com: '"Whatthefuckshouldimakefordinner.com", infiniteResponse[1].children[language].children[21].innerHTML, "Images\Whatthefuckshouldimakefordinner.com.jpg", searchBResponse[1].children[21].textContent',
Coolors_co: '"Coolors.co", infiniteResponse[1].children[language].children[22].innerHTML, "Images\Coolors.co.jpg", searchBResponse[1].children[22].textContent',
Numbeo_com: '"Numbeo.com", infiniteResponse[1].children[language].children[23].innerHTML, "Images\Numbeo.com.jpg", searchBResponse[1].children[23].textContent',
Doesthedogdie_com: '"Doesthedogdie.com", infiniteResponse[1].children[language].children[24].innerHTML, "Images\Doesthedogdie.com.jpg", searchBResponse[1].children[24].textContent',
Online_Convert_com: '"Online-Convert.com", infiniteResponse[1].children[language].children[25].innerHTML, "Images\Online-Convert.com.jpg", searchBResponse[1].children[25].textContent'
}
var infiniteResponse= Object.keys(infiniteResponseAAA).sort();
var sitesOnPage = [];
var brLength= document.querySelectorAll("br").length;
var whereToAddIt= document.querySelectorAll("br")[brLength-1];
var observer = new IntersectionObserver(function(entries){
entries.forEach(function(entry) {
if (entry.isIntersecting) {
getDataInfiniteS();
}
});
});
observer.observe(whereToAddIt);
// Data checker
function getDataInfiniteS() {
InfiniteScrolling();
}
// Actual script
function InfiniteScrolling() {
var code;
// It gets the first 5 sites that are already on the page and puts them inside sitesOnPage
if (sitesOnPage[0] === undefined) {
var h2s= document.querySelectorAll("h2");
infiniteResponseAAA[infiniteResponse[0]].split(",")[0].replace(/["]/g, "");
for (var i=0; i < h2s.length; i++) {
if (h2s[i].innerHTML === infiniteResponseAAA[infiniteResponse[i]].split(",")[0].replace(/["]/g, "")) sitesOnPage.push(i);
}
}
function randomSiteInfosF(siteN) {
// Checks if it's a number and not a string or something else
if (typeof siteN !== "number") return;
siteChecker_RNG(siteN)
// Infos about the site: title
eval(`siteInfo${siteN}= infiniteResponseAAA[infiniteResponse[${eval(`randomSite${siteN}`)}]].split(",")`);
eval(`siteTitle${siteN}= siteInfo${siteN}[0].replace(/["]/g, "")`);
}
function siteChecker_RNG(siteN) {
var sitesAvailable= infiniteResponse.length;
var h2s= document.querySelectorAll("h2");
var randomSiteN= Math.floor(Math.random() * sitesAvailable);
// Return if all sites are loaded
if (h2s.length === sitesAvailable) return;
// Checks if the random number is a correct one
for (var i= 0; i < sitesOnPage.length; i++) {
if (randomSiteN === sitesOnPage[i]) {
siteChecker_RNG(siteN)
} else continue;
}
eval(`randomSite${siteN}= randomSiteN`);
}
var howManySitesPerLoad= 3;
for (let i= 0; i < howManySitesPerLoad; i++) {
randomSiteInfosF(i);
}
// Creates a new div for the sites loaded from the database
if (document.getElementById("InfiniteScrollingID") === null) {
whereToAddIt.insertAdjacentHTML("afterend", "<div id='InfiniteScrollingID'></div>");
}
for (let i= 0; i < howManySitesPerLoad; i++) {
code= `${eval(`siteTitle${i}`)}\n</br></br></br>`
document.getElementById("InfiniteScrollingID").insertAdjacentHTML("beforeend", code);
}
for (var i=0; i < howManySitesPerLoad; i++) {
sitesOnPage.push(eval(`randomSite${i}`))
}
brLength= document.querySelectorAll("br").length;
whereToAddIt= document.querySelectorAll("br")[brLength-1];
observer.disconnect()
observer.observe(whereToAddIt)
}
This is a re-post since nobody answered me before when i provided a working minimal example and this script is super important for my site.
This is part of code that is used for my site in its sections, http://www.coolwebsites.ml/
https://youtu.be/QDrn_9svt6Y
CodePen: https://codepen.io/Attisalva/pen/pojdZXr?editors=1010
In the CodePen example (same problem), it creates (in this case title names to simplify the code) some title names that are already on the page and it should only create titles that aren't yet created (you can find titles in the object "infiniteResponseAAA").
I'm trying to lazy loading new images, titles, descs, etc randomly on the page but it keeps creating without checking properly if everything is already on page.
It's because i didn't end/return the function after i got a good number
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 have a filterfunction for google maps markers first it worked perfectly but than I wanted to have an multiple select box and than the function was not working anymore because the output is an Array i think.
Here is an working example: FIDDLE
This is the filterMarker function:
filterMarkers = function (category) {
var selectedValue = $(".select-multiple").val();
console.log($(".select-multiple").val(), category);
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.category == selectedValue || category.length === 0) {
// console.log('mcat', marker.category, 'cat', category);
marker.setVisible(true);
}
// Categories don't match
else {
marker.setVisible(false);
}
}
}
Thereby I tried this to do a forEach loop trough selected values and than check if they match with category of the marker:
var foo = [];
$('.select-multiple :selected').each(function(i, selected){
foo[i] = $(selected).val();
var result = JSON.stringify(foo[i]);
console.log(result);
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.category == result || result.length === 0) {
// console.log('mcat', marker.category, 'cat', category);
marker.setVisible(true);
}
}
});
What am I doing wrong in my filterMarkers function could someone help me out on this one?!
You were very close. You have to detect if there are any filters selected and clear or show all pins, then show the selected pins in the loop.
filterMarkers = function(category) {
// New - clear all markers or show all. If needed the selected markers will be made visible in following step.
if ($('.select-multiple :selected').length > 0) {
for (i = 0; i < markers1.length; i++) {
gmarkers1[i].setVisible(false);
}
}
else {
for (i = 0; i < markers1.length; i++) {
gmarkers1[i].setVisible(true);
}
}
$('.select-multiple :selected').each(function(i, selected) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.category == $(selected).val() ) {
// console.log('mcat', marker.category, 'cat', category);
marker.setVisible(true);
}
}
});
}
Note - could not get a snippet running here because I could not get the google map link to work. However, the OP's fiddle works and if you paste the above function over his function of same name then it runs well. Trust me I tried hard with the snippet but could not get it to play.
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());
}
I'm using this example to add markers on my direction A to B. How can I remove "old" markers, when I add new start and end points.
I try to change gmarkers[j].setMap(null); but not working.
for (var j=0; j< gmarkers.length; j++) {
if (boxes[i].contains(gmarkers[j].getPosition()))
gmarkers[j].setMap(map);
}
fiddle/original code from this question
Got it. You have a clearBoxes function. You can use it to clear the markers as well.
function clearBoxes() {
if (boxpolys != null) {
for (var i = 0; i < boxpolys.length; i++) {
boxpolys[i].setMap(null);
}
}
for (var j=0; j< gmarkers.length; j++) {
gmarkers[j].setMap(null);
}
boxpolys = null;
}
You use the setVisible function:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(10, -10),
map: map
});
marker.setVisible(false);
in your case:
for (var j=0, m; m = gmarkers[j]; j++)
{
m.setVisible(false);
}
With .setMap() you kind of loose the reference; setVisible() toggles the marker
best
M
To clear the markers, do this (set their map property to null):
for (var i=0;i<gmarkers.length;i++){
gmarkers[i].setMap(null);
}
updated fiddle