I'm using Google Maps API v3 to add markers to a map.
All the markers have a custom image as the icon.
I have some filters that the users can click to hide/show the markers on the map.
Basically what I do on the filters is iterate the markers collection and call setVisible for all of them (with true/false accordingly).
The problem I'm having is that when I hide several markers they all disappear at once but when I show the icons they show up slowly (it takes a couple of seconds for 40 markers to become visible).
Is there a way to make all the markers appear at once?
I thought about using a MarkerManager, but it seems to be oriented to something different.
Thanks for your help.
Try markerclusterer.js from google. Demo example in here. Hope it helps.
Related
I'm using Google Maps to set some markers. I have things setup so that when an item in a list is hovered on the marker will highlight.
This is done easy enough by keep a hash of the markers. So that when I hover over an item it just updates the icon in the marker.
this.markers[hoverItem.id].setIcon('/img/map/active-marker.png');
This works just fine. However I'm also using the marker-clusterer-plus plugin with Google Maps. The problem I'm having is to highlight the cluster icon if the marker is inside.
I can't find away to access the cluster object of the marker. Is there anyway to access or set it somehow?
Looking at the code...:
...you'd probably need to call MarkerClusterer.getClusters to get all the clusters.
Then loop through them, perhaps then calling Cluster.getMarkers and checking if your marker is in each cluster's array of markers.
Cluster.isMarkerInClusterBounds and Cluster.isMarkerAlreadyAdded_ might also be useful.
I want to have google map displaying whole planet(zoomed out maximally). Then, I would like to put overlay over map with button. When user click on button the overlay is removed and google map is automatically animating to the location i want.
So, I am not asking for complete solution, I just want you to tell me if it's possible to do that using google map js api, and if you can give me some direction, that would be awesome. I have searched a lot but found nothing on this subject.
Thanks.
I've noticed, that if difference between current zoom level and new zoom level more that 2, google maps won't make smooth zooming.
You can take a look at same question: How to zoom in smoothly on a marker in Google Maps?
map.setCenter(new google.maps.LatLng(theLatitude, theLongitude));
map.setZoom(yourZoomLevel);
See also: change location to preset coordinates and zoom with click of a button
I am having issues with toggling map layers with mapbox.js. Using the code from [https://www.mapbox.com/mapbox.js/example/v1.0.0/layers/] it pulls the basic mapbox base maps ex. mapbox.outdoors or mapbox.satellite as toggle layers, but the polygons on the personal map layer does not appear. I know that the map can be pulled by itself, but when I try to add it to a toggling map, the polygons do not appear. I am not sure if it is a problem with the code itself that isn't allowing my personal map to show, or if there is an issue with my mapbox map.
My github repository is https://github.com/beyeraut/mappingmv/blob/gh-pages/attempt.html
Any ideas are welcome!
I am using the Fluster library to do some clustering with the Google Maps API v3.
http://blog.fusonic.net/2009/12/fluster2-011-with-significant-performance-improvements/
I have "real-time" searching on the map. As you type in an input it hides or shows markers that match the search.
This works fine, however I can't get it to work with Fluster. i.e. I can show/hide my own markers, but I can't update the cluster markers.
Fluster doesn't seem to have a removeMarker() method. I tried adding my own, but with no luck...
this.removeMarker = function(_marker)
{
var index = me.markers.indexOf(_marker);
me.markers.splice(index, 1);
};
I would then try calling fluster.createClusters() or fluster.zoomChanged() but again, it just isn't doing what I want.
Does anyone know what I can do to work around this?
If it comes down to it, I guess I can remove the instant-search and just get it to re-render all the markers/clusters on the search form being submitted, but that is not an ideal solution.
Any advice would be greatly appreciated.
I have some thumbnails with gps info that I want to pass to a javascript google maps instance. I can get the points to draw on the map, center and zoom to fit, and I can replace the markers with the thumbnails.
This is close, but I'm looking for something that I can style (border, size, etc) and show more of a precise location, like a popup bubble like in google maps business search.. I've looked at the chart library, but that doesn't seem to be anything more than text and their icons.
I also like the way the panoramio (when you turn on photos in a google map) will scale the majority of images down and deal with zooming.. are there public libraries or functions we can use that do this stuff?
Thanks
Something like this? http://jsfiddle.net/Kai/Unh2M/embedded/result/ Its using an InfoWindow to display the picture when you click on the pin.
You can view the source on that at http://jsfiddle.net/Kai/Unh2M/ and check the reference on InfoWindows at http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows