MarkerCluster clickevent

[Stefan Karlsson]

Just started to use MarkerCluster and now i'm looking for handling
clickevents on clustered markers. What I want is if clicked on a dual
marker (or more) I'd like to open a infowindow with content for all
markers in this click. So what i'm looking for is the clickevent on
markers and also a method to return the markers within that click.
Thoght it would be standard functionality that should exist but did
not found it in the references for MarkerCluster.

Stefan

[Luke Mahé]

Hey Stefan,

This is possible, but I just updated the MarkerClusterer to make it easier :) (So download the latest version - http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerclusterer/src)

You can add an event listener to the markerClusterer 'clusterclick' event:

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {});

Then you can get info about the cluster with:

  cluster.getCenter();

  cluster.getSize();

  cluster.getMarkers();

Does that do what you need?

-- Luke

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Stefan Karlsson]

Y that is awesome, exactly what I was looking for.
Thank you very much for this, you saved my day.

Stefan

On 23 Juli, 07:37, Luke Mahé <lu...@google.com> wrote:
> Hey Stefan,
>
> This is possible, but I just updated the MarkerClusterer to make it easier

> :) (So download the latest version -http://code.google.com/p/google-maps-utility-library-v3/source/browse...
> )

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .

[Stefan Karlsson]

Now the clickevent works fine but I'd also look for "mouse over" and
and "right click" event.

What I am about to implement is clustered markers that with mouse over
returns the titles of all the markers in that cluster.
Click zoom in as default.
Right click open a infowindow with information of the markers.

This could all be done if a similar function as:
"google.maps.event.addListener(markerCluster, 'clusterclick',
function(cluster) {}); " is implemented with clusterRightClick and
clusterMouseOver events and with access of: "cluster.getCenter();,
cluster.getSize(); and cluster.getMarkers(); "

Right now I don't have any public URL to show but I will add this in
the near future. Btw I was unsure if I was suppose to start a new
thread but I thought this was in a similar scope I hope this is ok
event though it is outside the scope of the topic.

Stefan

On 23 Juli, 08:36, Stefan Karlsson <stefan.k.r.karls...@gmail.com>
wrote:

[Stefan Karlsson]

When added a infoWindow I had problems finding what was the MVCObject
to use with infoWindow.open(map, MVCObject). I made an implementation
of setPosition on the InfoWindow instead and that works fine
(infoWindow.open(map); infoWindow.setPosition(cluster.getCenter());).
But is there any way to do this in one step with something similar to:
"infoWindow.open(map, cluster);"?

Stefan

On 26 Juli, 10:51, Stefan Karlsson <stefan.k.r.karls...@gmail.com>
wrote:

> Now the clickevent works fine but I'd also look for "mouse over" and
> and "right click" event.
>
> What I am about to implement is clustered markers that with mouse over
> returns the titles of all the markers in thatcluster.
> Click zoom in as default.
> Right click open a infowindow with information of the markers.
>
> This could all be done if a similar function as:
> "google.maps.event.addListener(markerCluster, 'clusterclick',
> function(cluster) {}); " is implemented with clusterRightClick and

> clusterMouseOver events and with access of: "cluster.getCenter();,cluster.getSize(); and  cluster.getMarkers(); "

[Pat45]

Hi Stephan,

Trying to use cluster.getSize(), cluster.getCenter() etc...with no
success.
Possible to see some example code ?

Thanks

Patrick

On 23 juil, 08:36, Stefan Karlsson <stefan.k.r.karls...@gmail.com>
wrote:

> > >http://groups.google.com/group/google-maps-js-api-v3?hl=en.- Masquer le texte des messages précédents -
>
> - Afficher le texte des messages précédents -

[Pat45]

Hi Luke,

Trying to use cluster.getSize(), cluster.getCenter() etc...with no
success.
Possible to see some example code ?

Thanks

Patrick

On 23 juil, 07:37, Luke Mahé <lu...@google.com> wrote:
> Hey Stefan,
>
> This is possible, but I just updated the MarkerClusterer to make it easier

> :) (So download the latest version -http://code.google.com/p/google-maps-utility-library-v3/source/browse...
> )

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B­unsub...@googlegroups.com>
> > .

> > For more options, visit this group at

[Luke Mahé]

Here you go:

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {

  var center = cluster.getCenter();

  var size = cluster.getSize();

  var markers = cluster.getMarkers();

});

 

-- Luke

To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.

[Stefan Karlsson]

Hi Patrick,

here is a simple example based on the Google Maps API Example Marker
Simple:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /
>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker cluster
ClickEvent (based on Marker Simple)</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/
examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://google-maps-utility-library-
v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></
script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
var markers = new Array();

var infowindow = new google.maps.InfoWindow(
{ content: "mark one",
});
var infowindow2 = new google.maps.InfoWindow(
{ content: "mark two",
});



function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Marker1"
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(-25.663882,131.044922),
map: map,
title: "Marker2"
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});

markers.push(marker);
markers.push(marker2);

var markerCluster = new MarkerClusterer(map, markers);

google.maps.event.addListener(markerCluster, 'clusterclick',
function(cluster) {

var clickedMakrers = cluster.getMarkers();
alert(cluster.getMarkers().length);

});


}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

There is nothing magic with this code. One thing to look for thogh is
to see that you use the right version of markercluster. When i made
this example nothing worked because I used the wrong version of the
cluster manager. First try your own code with Lukes link to the newest
version. http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerclusterer/src

I hope this helps,
Stefan

> > >http://groups.google.com/group/google-maps-js-api-v3?hl=en.-Masquer le texte des messages précédents -

[Patrick Massas]

Hi Stephan,

Thanks very much ! it works fine.
Just a last thing : how to use the values (array ?) return by
cluster.getMarkers() ?
Sorry, but I'm a beginner with Javascript.

Regards

Patrick Massas

Hi Patrick,

markers.push(marker);
markers.push(marker2);

google.maps.event.addListener(markerCluster, 'clusterclick',
function(cluster) {

});

google-maps-js-a...@googlegroups.com.

[Patrick Massas]

Hi Luke,

 

Thanks very much ! it works fine.

Just a last thing : how to use the values (array ?) return by cluster.getMarkers() ?

Sorry, but I'm a beginner with Javascript.

 

Regards

 

Patrick Massas

 

 

[Patrick Massas]

Hi Luke,

 

Possible to use InfoWindow.open when click on a cluster marker ?

 

Thanks

 

Patrick

 

From: google-map...@googlegroups.com [mailto:google-map...@googlegroups.com] On Behalf Of Luke Mahé
Sent: mardi 24 août 2010 03:00
To: google-map...@googlegroups.com
Subject: Re: [Google Maps API v3] Re: MarkerCluster clickevent

 

Here you go:

[Luke Mahé]

It sure is. You should be able to do something along the lines of:

infowindow.setPosition(cluster.getPosition());

infowindow.setContent(YOUR_CONTENT_HERE);

infowindow.open(map);

-- Luke