This question already has an answer here:
maps markers with input sliders
(1 answer)
Closed 4 years ago.
i have a huge list of stores with addresses (longitude and latitude and codeclient ....). For each stores, a marker appears on the Google Map on the page.
my problem is, users must be able to filter these markers depending on one thing: CodeClient. So to be more specific. If the user sets the CodeClient in the input slider it is supposed to only show the client (the owner of the CodeClient who we put in the slider) Like this ; CodeClient = 12345 , so when we put the number 12345 in the the input slider , and click on the button it should display only the marker of this client , i mean the markers who refer to the place of this client.
the problem is solved by xomena , this is the path for the solution
Filter Google maps markers with input sliders based on one variable
Seems like you are partially asking about setting marker visibility? As touched on in this Stack post (among others)
Google Maps API Marker Visibility
Most likely, marker.setVisible(true/false) is the way to go.
And then basically you would be doing that in the change event handler for the slider input.
One idea is loop over the markers array and toggle it invisible while setting the marker matching selected coce-client visible.
Another idea is to make it a "marker dictionary" where the keys are the code client value, i.e.:
markers = {
12345: SomeMarkerInstance,
67890: SomeOtherMarkerInstance,
// ... etc
}
selectedMarker = '12345'
and in that way you could quickly just toggle off visibility on the current selected marker while toggling on the newly selected marker. The rest of the markers would be by default not visible.
I.e. (pseudo codey)
function someEventHandler (event) {
markers[selectedMarker].setVisible(false)
markers[selectedCodeClientValue].setVisible(true)
// and perhaps other stuff, e.g. recenter the map, etc
}
You are setting a title to your markers with this CodeClient and you are pushing your markers in an array. So what's the big issue here? Simply loop through your array and set the marker visibility based on the title (CodeClient).
for (var i=0; i<markerArray.length; i++) {
if (markerArray[i].title == '12345') {
markerArray[i].setMap(map);
} else {
markerArray[i].setMap(null);
}
}
Related
How can we differentiate among multiple NMAMapMarker at same location.
As we have marker.userdata property for google markers but how to manage data for markers in Here Maps.
When you are placing multiple markers at the same geo-point, they are stacked on top of the other. Since they are all at the same coordinate, only the top most one will be displayed. To enable multiple marker to be shown at the same coordinate, you will need to have some logic to slightly shift the position of markers. For example check if there is already a marker at the point, if there is an existing one, then use some logic to slightly change the coordinate value of the new marker to be added at the point.
Is there a way to get Mapbox.js tooltips to show when you're hovering over a marker without following the mouse around? I just want it to stay put when I hover.
I am using the following code on my map:
var map = L.map("impact-map")
.setView([20, 80], 3)
.addLayer(L.mapbox.tileLayer("hotchkissmade.in_impact", {
detectRetina: true
}));
var myGridLayer = L.mapbox.gridLayer('hotchkissmade.in_impact').addTo( map );
var myGridControl = L.mapbox.gridControl(myGridLayer, {
follow: true
}).addTo( map );
I am using the follow:true from the example here.
Disclaimer: I know there may be more flexibility outside of gridControl but I like having my tooltips from Tilemill as I don't want to load the data in the browser twice, since I'm basing the tooltip data off the layer making the markers on my map in Tilemill
This isn't possible with a gridControl - you can have tooltips either follow the mouse or stay in a specific location, but unlike L.mapbox.featureLayer, there is no actual marker, polygon, or feature you're hovering over - the geometry is not pushed to the client - so, there would be no 'anchor' for the tooltip to stay on.
http://rickgutierrez.bol.ucla.edu/map_mobile6.htm
I am working on a mobile map using google maps API and JQuery Mobile v1.2. I stored spatial data (the bikeway polyline layer and the bike rack point layer) in google fusion tables and displayed them on the map. I would like to toggle each layer on/off using the bike and park anchors in the JQuery navbar. I have exeperience toggling layers on/off with checkboxes on desktop maps but prefer the look and size of the navbar toggling for the mobile map.
My ideal functionality would be for the map to load with the bike layer on and the bike portion of the navbar darker to denote that it is selected, just like on other web apps. A user can use the map to find safer biking routes with bike layer then turn on the bike parking layer at their destination to find a place to lock their bike. Each layer can be toggled on and off independently.
I tried pasting the code in here but it was a mess. Please look review my source code at the above link. I am a novice at coding and would appreciate any help. Thanks in advance.
Update: I guess someone commented that if geolocation is denied the map does not work. here is the geolocation code:
// allow iPhone or Android to track movement
if ( useragent.indexOf('iPhone') !== -1 || useragent.indexOf('Android') !== -1 ) {
navigator.geolocation.watchPosition(
displayLocation,
handleError,
{
enableHighAccuracy: true,
maximumAge: 30000,
timeout: 27000
}
);
// or let other geolocation capable browsers to get their static position
} else if ( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition( displayLocation, handleError );
}
How do I fix that? I am guessing that I need to put some backup coordinates into the else statement?
Add a google.maps.event.addDomListener listening for a click event to the elements that you want to perform the toggle. In the function associated with that listener add your code to toggle the layer.
I would suggest:
if (layer.getMap() == null) layer.setMap(map); else layer.setMap(null);
where "map" is a reference to your google.maps.Map object.
Working example
I've got a website vith a view of a (long) street, with markers appearing all along it that have different information on them about that location.
What I'm trying to do is create a button so when you press it, it starts at the bottom of the street and slowly moves the map along the street, opening each pop-up as you go then closing it when the next one opens.
The markers are all generated using a php loop linked to a database of information and I'm using InfoBubble to create the pop-ups.
You can use the google function bounds.extend and fitBounds: Google Map API v3 — set bounds and center and add some of your markers to the array and wait a bit and add new markers to the array and rinse and repeat. You can use a javascript timer to wait. Or you can save your path and use fitbounds only on that marker.
Edit: When you have the next bounds with getBounds you can calculate delta x and delta y, e.g. x2-x1 and y2-y1 from 2 points of the start bound and the target bound.
When user pans the map, I make and ajax request to the server and get all the markers that fall into the new bounds, something almost identical to what is described here: Dynamically load Google Maps Markers with gmaps4rails
My problem is that when I use replaceMarker all the markers on the map are recreated therefore each of them flickers onces. This really annoys me.
If I use addMarkers, I don't get the flicker effect, but my sidebar gets screwed because;
1) The markers which are left out of the bounds after pan, are not removed from my marker list.
2) Some duplicates are added to my marker list - markers that fall into intersection of old and new bounds.
I tried modifying the addmarkers function but nothing good came out of it.
This is how I changed the addMarkers function. Comparing the new_markers set to the old one to find out which ones to remove and leave the already existing ones alone.
addMarkers : (new_markers) ->
#update the list of markers to take into account
#resetSidebarContent()
added_markers = (marker for marker in new_markers when ($.grep(#markers, (a) -> a.id == marker.id).length == 0))
removed_markers = (marker for marker in #markers when ($.grep(new_markers, (a) -> a.id == marker.id).length == 0))
for marker in removed_markers
#clearMarker(marker)
#markers.remove(marker)
#markers = #markers.concat(added_markers)
#put markers on the map
#create_markers()
#adjustMapToBounds()