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()
Related
So the mapView.clear() method only removes the markers from the map within a visible region where I currently idle at.
I can still see other markers on the map by zooming out or moving around the map. Those markers couldn't be removed cause they were invisible the time I invoked clear().
My current solution is to loop through all markers stored in an array and invoke marker.mapView = nil to make sure each of them gets removed from the map.
Is there any other way to do this more efficiently?
Every time that you add a marker in your GMSMapView you can keep it in an array, and after that when you want to remove all of them you only have to cycle over them making .map = nil
for marker in self.markers {
marker.map = nil
}
self.markers.removeAll()
This is what you can read from GoogleDocumentation about this https://developers.google.com/maps/documentation/ios-sdk/marker#eliminar_un_marcador
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);
}
}
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.
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.