OverlappingMarkerSpiderfier show which markers are in a 'spiderfy cluster'? - javascript

I have a google map with a bunch of markers on it. Some of those markers have the same lat/lon as other markers, so sit on top of each other. I'm using the oms library to allow for the markers to be spiderfied out so each marker can be clicked.
All working great so far. However the only way you can tell if there's multiple markers is by clicking on the markers, which is a problem for my application.
Is there a way to indicate which markers are grouped into 'spiderfy' clusters?
I'm also using the MarkerClustererPlus library to handle clusters. It could be possible to use the clusterer library to provide a count and then 'on click' spiderify the markers but I couldn't figure out how to do that.
If you check this example it has spiderfy and cluster plugins mixed and working smoothly. But my problem is I am using google map API with markercluster and OverlappingMarkerSpiderfier plugin. I was also looking for if we can use leaflet cluster plugin for google map? Thank you very much.

You can use a listener to check if the marker is spiderfiable or not. If it is spiderfiable, it means that there are others elements under that pin.
google.maps.event.addListener(marker, 'spider_format', function(status) {
if(status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIED
|| status == OverlappingMarkerSpiderfier.markerStatus.UNSPIDERFIABLE)
{
marker.setIcon('Markers/marker.png');
//use a normal marker if the element is already spiderfied
//or if it can not be spiderfied
}
if(status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE)
{
marker.setIcon('Markers/cluster_marker.png'); //use a different marker
}
});

Related

How to reference a google map marker by it's id and activate it's click event using javascript?

I am dealing with Google Maps here and javascript. I have an existing marker on my Google map and I can click on it and it displays a div. If I click it again, the div disappears. I gave this marker a specific, unique id.
There is also a Polygon on the map. I want when the user clicks on the polygon that the click event is activate for a marker that I will reference by the marker's id.
Is this possible? If so, let's say that the id of the marker is U123. How would I do this?
Here is the code I use to add an event to the polygon click:
google.maps.event.addListener(assetPolygons[polygon_count],'click', function (event) {new google.maps.event.trigger('U123', 'click');});
U123 is the name of the marker id. The above is not working.
var marker = new google.maps.Marker(markerOptions);
marker.setValues({id: 1}); // v3
marker.metadata = {type: "point", id: 1}; //v2 or v3
I guess the better way to do this is to store your marker in a global var and then do
$(".something").click(function(){
new google.maps.event.trigger( marker, 'click' );
// Here marker is a global var so accessible everywhere.
});
Two seconds in google found How to trigger the onclick event of a marker on a Google Maps V3?
The only difference in the function that was stated to work, wich is:
google.maps.event.trigger(markers[i], 'click');
and yours that i can see is the new, try removing it
I built a function that loops through the assetMarkers array that stores each marker. This works:
function ClickMarker(u) {
for (i=0;i<assetMarkers.length;i++) {
if (assetMarkers[i].id == u) {
google.maps.event.trigger(assetMarkers[i], 'click');
i = assetMarkers.length;
}
}
}
In the above function, the variable u is the id of the marker in the array assetMarkers (which is the array storing the map markers). When I create the marker, I set the id using marker.setValues({id: 'U123'}); where U123 is the id of the marker.
I have to loop through the assetMarkers array to find the one I am looking for.
I was hoping, the equivalent of document.getElementById(u) would exist in Google Maps so that I would not have to loop through the array. It would be great, Google API guys, if we programmers could do something like this:
google.maps.event.trigger(google.maps.getElementById(u), 'click');
Thanks for everyone's input! It was very helpful as I am a newbie to Google Maps.

Google Map OnClick, How to Programmatically get clicked point information and add a pushPin

I am new to Google Maps programming, and I want to :
add a pushpin onclick
get the clicked point location
in addition, I want to code this in javascript(&jquery)
In fact, here is an example of what I mean
http://www.gorissen.info/Pierre/maps/googleMapLocation.php
so, can anyone provide me with information about how I can code it?
Kind regards!
GEvent is Maps API 2 which is deprecated. You should be using Maps API 3 instead (especially if you're starting out 'new' and not having to maintain an old API 2 site). And when you do, something like this should work:
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});

Google maps info window: how can I get its offset/clearance?

I have a Google v3 Map with a UI element that overhangs the top of it like so…
And I have an info window attached to multiple markers. The problem I have is that when the infowindow opens and auto-pans to be visible within the map (behaviour I want), it obviously takes no account of the element overhang…
…so the user has to manually pan to see all the info clearly or get at the close box.
I've looked to see if there is a way I can get the offsetTop of the infowindow from its parent map, so I can add an extra panTo nudge when necessary, but I'm stumped.
Attempts such as…
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map, marker);
var infoTop = infowindow.offsetTop;
console.log(infoTop);
});
…just give me undefined.
What would be great is to be able to set a clearance property on the infowindow, as is possible with the infoBoxClearance property of the InfoBox utility. But I don't want to use InfoBox because there are stylistic aspects of the standard infowindow I prefer.
And I would prefer not to have the map pan more than is necessary by using disableAutoPan and calculating an optimal panTo for each marker.
Any suggestions?
I haven't tried this in Version 3, but in Version 2 the standard solution is to create a custom control on the map. The [v2] infoWindow avoids all controls, including custom controls. Your custom control could simply be an empty space covered by your external UI.
http://code.google.com/apis/maps/documentation/javascript/controls.html#CustomControls

Hiding Info Boxes that are in MarkerClusters in Google Map API

Hi I have multiple markers with InfoBoxes attached to them that are open. I am trying to integrate MarkerClusters so that I can cluster areas with large groups of people. I can do this and it hides the markers that are within a cluster but it does not hide the infoBoxes associated with these boxes. I was wondering if there was anyway of doing so or anyway of checking whether a marker is within the cluster array or set to isVisible: false;
Any help on this would be great as Ive been trying to sort this out for hours
cluster.push(marker);
var friend_infobox = new InfoBox(myOptions);
if(cluster.indexOf(marker) != -1) {
friend_infobox.close(map, marker);
}else {
friend_infobox.open(map, marker);
}

how to handle the event when markers load into memory

i have many makers (maybe 500) to insert to maps, so i want to Optimization them
google.maps.event.addListener(marker, 'visible_changed', function() {
alert('ww')
});
this code can't alert 'ww', when i zoom in the map(so some marker will not be seen)
why can't trigger the 'visible_changed' event when zoomin
and how to handle the event when the marker is loaded into memory,
and how to handle the event when the marker is inserted into map,
thanks
If you would like to display this many markers you should be using marker clusterer or marker manager - they will do all the hard work for you - all you need to do is pass an array of marker objects to them. More info here http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries and a demo here
Marker Manager
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/docs/examples.html
Marker Clusterer -
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/examples/advanced_example.html

Categories