I've seen the same question asked before but they all seemed specific to their situation and I didn't really understand as I am new to JS.
I have a google map api already rendered. I have created 3 separate arrays, each with a long list of locations for google map markers. All the markers are currently showing on the map.
I have created 3 separate buttons and I would like each button to show/hide the markers in it's corresponding array.
I really appreciate any help given, I have been searching for a week on how to do it and am sure its fairly simple but being new I'm just not understanding.
when you create marker an object is returned, store this array of markers on a global var.
In the event of the button0 markers[0].setMap(map);
In the event of the button1 markers[1].setMap(map);
Related
Leaflet JS - Is it possible query?
In a nut shell, what I am trying to do is this:
Using the latest version of Leaflet JS, I want to know if its possible to have multiple markers, in a single location, display in a single popup.
No, it's not possible.
You should pre-process your data beforehand, so that several data points with the same coordinates collapse into the same marker & popup.
In other words: iterate through your data points, and for every data point check if a marker exists in that location. If it does, add data to the marker's properties or popup; if it doesn't, create a new marker. The specific algorithm will depend on the nature of your data. You might also want to use a more complex data structure, such as r-trees, if your data set is large.
There's also the quick&dirty option of using marker clusters, disabling spiderifying, then using custom code for the event handlers of the cluster marker. That's pretty much the same algorithm defined above, only that the marker cluster algorithm takes care of locating nearby data points.
I made a similar map, and exactly as described by Ivan, I used markerCluster plugin and on cluster click action disabled the spiderfy. I then used 'custom code for the event handlers of the cluster marker' to show multiple markers' data in one single outside div.
An example can be found here .
And there is a tutorial describing exactly what you are looking for here, but also using markerCluster js.
Hope it can help others people too !
I want to develop a map chart but I need multiple markers on each state.
I would like to display sales by state and income by state, so I want to display two markers and two values on each state.
I searched a lot in google, but it was showing multiple markers in google maps, only but my requirements are different.
If anyone can help with that, it will very helpful.
see my apex-plugin on apex-plugin.com. this places multiple markers on a google map.:
www.apex-plugin.com
to see how it works check my demo page right here:
MultiMarker Demo
Maybe this helps?
I'm developing an application that loads lots of markers in OpenLayers 3.
However, I would like to dynamically display and load markers while user is panning at a certain zoom level.
Could someone provide me an example, or directions to do that?
For instance, I would like to first create an example that drops a marker where user has clicked on the map.
So, with this information, I will be able to handle the rest and post my solution here.
I've managed to create a way for setting this up:
http://weebah.com/weebah_examples/click_to_create.html
So I have a probably not so unique scenario. The simplest way to explain it is a google map with all 50 US states, each state will have two markers. The markers are both driven by the same lat/long value. The problem Im having is that the markers are rendering ontop of one another. I somehow need to have them render next to one another or offset so that I can see both. The problem is how do I get it to not overlap into another state.
I saw some really neat "spider" functionality where it renders one marker and then if you click on it the others fan out, but the website was in another language.
I am going to try and use the following library.
https://github.com/jawj/OverlappingMarkerSpiderfier
The problem with the above implementation is that I am using a combination of KML and google maps client-side. I dont see a way to implement that for the kml markers
The Overlapping Marker Spiderfier project on GitHub will probably accomplish what you need.
Otherwise you can play around with the Marker's icon property. The icon can accept a Symbol which has and anchor that can be shifted from the default location (0,0).
Symbol documentation: https://developers.google.com/maps/documentation/javascript/reference#Symbol
I'm using Bing Maps to show locations of stores. The store information is being populated from a dynamic JSON response. On page load, the map loads local stores with pushpins and infoboxes. When the map pans, I want to keep the pins that are already on the map where they are, and create additional pins of stores within the radius of the map's bounding box, and remove them when they leave the radius (all while keeping the original store pushpins).
Right now, I'm at the point of populating the map, and adding the new pushpins as the map pans. However, I'm kind of lost when it comes to removing the new pins, while maintaining the original ones. From my Google searches, and research, I think I'd want to create two entitiy layers for the pins, and then remove the pins on the second entity layer as the map pans around, while re-populating with new store pins.
Does this make sense? Does anyone have any idea how to create pins on two separate entity layers, and then remove the pins on one of the layers?
Thanks!
You need to add the pushpins in two different EntityCollection (they're like Shape layer), see: http://msdn.microsoft.com/en-us/library/gg427616.aspx
If you added the secondary pushpins in a separate entity collection, then you can call clear() on the specific entity collection to remove the secondary pushpins and add the new ones without removing your main pushpins.
If you need more help, let us know.