I am using marker clusterer with google maps. All is working very well but I would like to know how to cluster a marker even if there is only 1 marker with that grid. At the moment on page load you will see the odd marker darted around and others are within a clustered icon. I would like all even the single markers to display a cluster icon also.
Set the option minimumClusterSize to 1 (default is 2)
new MarkerClusterer(map, markers,{minimumClusterSize:1});
Related
I have a map that has markers programmatically placed on it based on values in my database. When you click on a marker, it will go to a detail page for that location.
My problem is that when the map is sufficiently zoomed out, markers that are close enough to each other appear as a single marker, in effect hiding some of the markers. Is there a way to tell programmatically whether a marker is part of a group of markers or is hidden/covered up by other markers?
My intention is to do something like this for each dynamically generated marker:
marker.addListener('click', function() {
// if marker is not hiding any other markers
window.location.href = markerURL;
// else if it is hiding markers/is part of a group of markers
map.setZoom(15);
map.setCenter(marker.getPosition());
});
I have checked the Marker API documentation, but can't seem to find any useful methods. getClickable and getVisible always return true in my case, regardless of whether a marker is covered by another marker. Any suggestions? Thank you!
I ended up going with MarkerClusterer to solve my problem. I was hoping for a simpler solution, but this turned out to be pretty simple after all.
The only thing I needed to add to my existing marker-generating code was a list: var markers = [];, and then I called markers.push(marker); on all of my markers. The final step was to create a new MarkerClusterer object:
var markerCluster = new MarkerClusterer(map, markers, options);
And MarkerClusterer handles the rest more or less (the options parameter is optional, but I used it to set the path to my images and set the maximum zoom level). Now, in the situations where previously my markers were stacked on top of each other, making it impossible to see or click certain markers at certain zoom levels, I instead see a cluster with a number indicating the number of markers in that cluster. Clicking the cluster icon will further zoom in, revealing my markers.
All of this was done following the simple usage example on their github page, but they have pretty good documentation too. Most of my time getting this to work right was actually spent styling the cluster icons to match my site's color scheme...
Is it somehow possible to reveal a Leaflet marker inside a Markercluster without user-interaction?
For now i'm using the panTo Method (http://leafletjs.com/reference.html#map-panto) for centering a rendered marker. But if the marker is inside a cluster the map does not zoom in until that specific marker gets revealed.
map.panTo(L.latLng(47.4612, 8.9123123));
you can remove it from the cluster and add it to the map...
cluster.removeLayer(theMarker);
map.addLayer(theMarker);
I have a list of google maps markers as html links next to a google map. I have the function that is triggered when I click on the link. Marker ID is passed to this function.
My question is - when I have 100 markers, I want somehow IDENTIFY the clicked marker on the map. Some sort of ripple effect that would go away from the marker.
please advice what are my possible options so I could develop appropriate solution
Example: 100 markers already on the map. I also have 100 names on the left. Each name corresponds to each marker. When I click the name, I want the marker that belongs to that name somehow "blink" or identify itself in some other way among other markers.
before the markers was pin on the map
you need to set a global markers variable
var gb.markers = [];
while you create each marker need to push into global marker array
marker = new google.maps.Marker({
// other stuff
'id': marker.id
});
after you done with assign function to marker, push it into global var
gb.markers.push(marker);
make sure when you click on marker will get marker id
and loop the global markers or make marker array with id as index
A ripple effect would be quite complicated, possibly involving positioning of a 'GroundOverlay' object centered around the marker you wish to highlight.
If your goal is just to be able to highlight the marker, perhaps playing a simple animation using 'Marker.setAnimation(animationObject)'. You could perhaps using 'Animation.BOUNCE' to highlight the marker?
I have an OpenLayers map object, and I have added markers to a layer, and added it to the map.
But how do I make sure all the markers are in the display area?
Thanks,
Gil
In order to display all markers on the map
Firstly,make sure you have all markers in one layer.
Secondly,you need to zoom to bound where all markers in marker layer are extended.
To do that,simply
var bounds = markerLayer.getDataExtent();
map.zoomToExtent(bounds);
//has a second parameter that decides to find closest zoom level
//default is false
Please check OpenLayers Document for Marker Layer
Best Regards
Myra
I really like how Trulia.com has created their custom Google Map InfoWindows.
What I like in particular about Trulia's implementation of the InfoWindow is:
Extends beyond the map border: Google Maps InfoWindows are contained within the map border whereas Trulia's seems to be able to float on-top of the map
Always displays InfoWindow near map Center: Google Maps InfoWindows always display the InfoWindow above the marker whereas Trulia InfoWindows always display the InfoWindow as close the center of the map as possible. For example, if the map marker icon is on the top of the map near the border, the Trulia InfoWindow is displayed below the map marker icon
InfoWindow is displayed on mouse hover (not 'click'): With the default Google Maps InfoWindow, you have to 'click' the map marker icon to display the InfoWindow whereas Trulia InfoWindows are display simply by hovering over the map marker icon.
I found the PdMarker, which is a 3rd party extension for Google Map InfoWindows that accomplishes most of the above bullets but not all. 1) It does not extend beyond the map border, 2) it does not work with Google Maps API version 3 (only version 2).
Anyone know how Trulia is accomplishing their InfoWindow-like implementation on Google Maps API v3?
That's an interesting question. I've been playing with maps recently too. I'm far from expert but I can tell you what I know.
I think the site you mentioned uses a custom div overlay rather than google's info window.
1. InfoWindow is displayed on mouse hover (not 'click')
This can be done with event listeners. For example in maps API v3:
google.maps.event.addListener(marker, 'mouseover', function() {
// myDiv.style.visibility = 'visible'
});
google.maps.event.addListener(marker, 'mouseout', function() {
// myDiv.style.visibility = 'hidden'
});
Here's is a pretty good example of how this can be done.
2. Extends beyond the map border
3. Always displays InfoWindow near map Center
Both of these can be achieved using CSS: (2) using z-index and (3) with position.
There is a similar example of using custom marker tooltips which you can find here. It also shows how you can utilize mouseovers to pop-up tooltips by hovering other elements on your page.
myElement.onmouseover = function(){
google.maps.event.trigger(marker, 'mouseover');
}
myElement.onmouseout = function(){
google.maps.event.trigger(marker, 'mouseout');
}
Finally, another site that makes a good use of maps, although this one uses V2 of the API. Hope this helps.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html
is an extension to google maps which allows you to create custom infowindows