Hi~ I have about 200 markers on my map.
I want to make them dropping one by one when the page is loaded, i.e. adding a small delay/interval to each marker's dropping animation.
I tried to archive it by using jQuery's wait()delay() and JS's setTimeout() methods, but the animation seems to be triggered by the creation of the Marker instances, while those methods only working with methods calls. (eg: setTimeout(function(), 1000); )So I could get none of them working.
Can anyone please provide a simple solution for this problem? Thanks in advance!
Quick suggestion:
Create your markers but don't set them on a map. Add them to an array. When you're done creating the array, pop the first one and drop it on the map. Set an animation_changed event on the marker. When the marker stops dropping it will change it's animation to null. In the event, test what the animation is, and if it null, pop the next marker off and repeat.
Related
I am trying to add a bunch of markers to a map with show/hide buttons for each category of markers. Adding a marker from stored db data puts them on the map and makes them clickable, but they won't respond to setMap(null) unless that call is through google.event.addListener(marker, ...). Calling it from a standard js button onclick event, or via google.event.addDomListener(marker, ...) doesn't work.
Also maybe helpful to note is that when I call marker.setAnimation(BOUNCE) the marker starts bouncing but it looks like there is a duplicate marker under it. Similarly, if I drag the marker it's as if an unmovable duplicate is created right under it.
Thoughts? This is super frustrating!
Just like this taken from here ? Are you trying to avoid google maps api's google.maps.event.addDomListener? Why? You can use it to listen to your button's click event too. just as in:
var YourButton = document.getElementById('myButton');
function HideMarkers() {
// Hide us
}
google.maps.event.addDomListener(YourButton, 'click', HideMarkers);
customized for you from. For the second part, seeming like double markers I suppose we need some code..
This turned out to be purely user error. I am using firebase to store map data without a server backend and was adding duplicate markers. This explains the "inability to hide" and also the appearance of duplicate markers when dragging or animating.
The reason it was working from a click event on the marker was that both duplicate markers were receiving the click event and so both were being hidden.
setMap appears to be perfectly reliable when used in or out of google event handlers.
I've got a tile layer that I want to remove and replace with another one in Google Maps. My tile layer is defined in MapOptions using GetTileUrl to call a function.
For instance, I want to be able to remove a county layer and replace it with a census tract one.
When I try to do this it only loads the new layer when I pan the map. I think I need to remove the old tiles from Google's cache (as if I turn browser caching turned off this still happens).
I've tried the map "resize" event, but it doesn't work.
Do I need to set the map to null and reinitialize everything? Or can I just reload my map tile layer?
When I change the layer, the URL for the tile loading changes - so I'm guessing that adding a fake parameter won't help me.
The code is pretty long (and has extra stuff in it), but if you want to see this in action you can go to JusticeMap.org
var jmapMapType = new google.maps.ImageMapType(jmapTypeOptions);
map.overlayMapTypes.push(jmapMapType);
I needed to store the jmapMapType in a global variable.
Then I can remove it, and add it back. This reloads the tiles:
map.overlayMapTypes.removeAt(0);
map.overlayMapTypes.push(jmapMapType);
I've created a map that uses the MarkerClusterer library. It seems to work but there are a couple of issues.
First, it seems that the number of markers represented by the cluster is sometimes a bit off - ie, sometimes a cluster will say it has 24 markers, but when you click on it, 40 markers show in the window.
Second, once you zoom out a few levels, the numbers get crazy - we've only got 4k+ markers and I get clusters with 12k+ numbers on them.
I've got no idea how how to move forward. Would love some help. Thanks!
You have an event listener that calls showMarkers when the map is idle. That function adds all the markers to the clusterer every time the idle event fires (so you end up with multiple copies of each marker). You probably want addListenerOnce instead of addListener.
Another option would be to clear out the markers in the clusterer before adding them all back in again, but since you seem to only need to add a fixed set of markers to the clusterer one time, that would probably not be the best option.
I have a web page with a google map (api v3) that has dozens of markers. I'm using markerclusterer to cluster the markers. And I have a separate panel div listing title info for each of the marker that appear on the map.
I've set up a hover event so that when the user hovers over one of the titles in the panel the corresponding marker on the map starts to bounce. This works fine if the marker hasn't been incorporated into an existing cluster. However, if the marker been incorporated into a cluster then it does not work because there is no marker to animate.
Is it possible to remove the marker from the cluster without removing it completely from the map, then animate the marker, then add the marker back to the cluster? (I took a look at the source code , but I couldn't figure out how to remove the marker from the cluster while still leaving it on the map.) Of course, if there is an easier way to tackle this problem I would love to hear about it.
After another day and another review of the source I figured out how to solve the problem, and it turns out that the answer is easy.
All you need to do is call marker.setMap(google.maps.Map object). Then, if you want to get fancy, you can call setSums on the ClusterIcon object to reduce the number of markers listed in the cluster overlay by one.
I figured out how to solve the problem.
#chuck w solution helped me.
call marker.setMap(map)
Then, if you want to get fancy, you can call
markerCluster.repaint();
to collapse to cluster
I would like to know how to create effects / animations over Google Maps markers. Specifically, I would like to zoom-in/out or "fade" a marker after a given amount of time. Could it be possible with HTML5 ? Is there any jquery effect library for doing this?
(I could use a map tile server for creating map tile overlays and re-generate tile overlays every second, but I guess it is very processing-intensive...)
Thanks in advance
I haven't seen any library to do this, and there isn't functionality in the API to fade Markers per say.
Instead, what you can do is simulate markers by creating your own Custom Overlay that looks like a marker. A custom overlay usually contains a div, which you can easily control the opacity of using JavaScript / jQuery based on a class or id you assign during the custom overlay construction.
As an example, if you look at this page you can see the is a button used to toggle the visibility, you could just as easily change that JavaScript to control the opacity of something.
I am looking at doing something similar.
If you set the marker option 'optimized: false' for all markers, each will have its own element, you can then use jQuery to select all the markers on your map using something along the lines of $('#map_canvas img[src*="filename"]'), assuming that you're using custom images for the markers.
What this doesn't address is relating each element in the array returned to a specific marker.
I think that you could add the markers to the map one at a time, re-run the jquery selector, and compare the elements returned vs. the previous run, to see which element was new. I haven't tested this part (I have what I say in the first paragraph), as I'm working towards something slightly different.
You should then be able to adjust the opacity/size of the image directly.
This might get clunky for large numbers of markers.
Paragraph two above is stupid.
Add a marker to the map, making sure to set the optimized:false option. then
var freshlyAddedMarkerImage = $('#map_canvas img[src*="your_marker_icon"][class!="adjustMe"]');
The newly added marker won't have the class, so will be the only element selected. Before setting the className, you could set an ID, add the element to an array in the same index position as the corresponding marker object is held in another array, etc.
This should be a lot less clunky to implement than what I proposed previously. I'll try and come back with a working example soon.
I suppose if you knew that there were groups of markers that would share the same transform (zoom/fade), due to being the same age or whatever, then you could add all of them and only do the jQuery select at the end, before looping through the returned elements setting a class that would allow you to adjust them en-masse.