how to use a simple clustering

5,124 views
Skip to first unread message

Greg45

unread,
Nov 26, 2010, 12:34:19 PM11/26/10
to Google Maps JavaScript API v3
hello,

I want to add the clustering function on my web site:

I try many link for to do that :
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

so when I put this line in ma script :
var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions);
My marker disapear and I don"t know why

here the link of my website: http://greglg.free.fr/spotme/final.html

could you help me please

Thanks

geoco...@gmail.com

unread,
Nov 26, 2010, 1:48:14 PM11/26/10
to Google Maps JavaScript API v3
On Nov 26, 12:34 pm, Greg45 <gre...@gmail.com> wrote:
> hello,
>
> I want to add the clustering function on my web site:
>
> I try many link for to do that :http://google-maps-utility-library-v3.googlecode.com/svn/trunk/marker...http://google-maps-utility-library-v3.googlecode.com/svn/trunk/marker...
>
> so when I put this line in ma script :
> var mcOptions = {gridSize: 50, maxZoom: 15};
> var mc = new MarkerClusterer(map, [], mcOptions);
> My marker disapear and I don"t know why
>
> here the link of my website:

http://greglg.free.fr/spotme/final.html

Have you checked your javascript errors?

In Chrome I see this:
Uncaught ReferenceError: MarkerClusterer is not defined

I don't see any include of the markerclusterer script on that page.

You can use "var mc = new MarkerClusterer(map, [], mcOptions);"

without it.

-- Larry

Greg45

unread,
Nov 27, 2010, 3:30:03 AM11/27/10
to Google Maps JavaScript API v3
exactly, I see in this code:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html
they are an another script ( markerclusterer.js) I put it in my mage
and now I haven't error with the markerclusterer not define.

So now I have the marker but the clusterer doesn't work.

you can see the modification of my website at the same link

On Nov 26, 7:48 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On Nov 26, 12:34 pm, Greg45 <gre...@gmail.com> wrote:
>
> > hello,
>
> > I want to add the clustering function on my web site:
>
> > I try many link for to do that :http://google-maps-utility-library-v3.googlecode.com/svn/trunk/marker......

Rossko

unread,
Nov 27, 2010, 6:36:14 AM11/27/10
to Google Maps JavaScript API v3
> So now I have the marker but the clusterer doesn't work.

The markercluster is doing what you tell it to do ... which is
nothing.
Go back to the documentation and read further down on
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html
In particular
"Once you create a marker cluster, you will want to add markers to
it."

Greg45

unread,
Nov 27, 2010, 9:53:48 AM11/27/10
to Google Maps JavaScript API v3
ok, but how use this :

MarkerClusterer supports adding markers using the addMarker() and
addMarkers()method or by providing a array of markers to the
constructor:

I suppose, i need to use addMarkers() but how it's work ? do you have
an example ? I need tu use markerclusterer.js ?

thanks for your help

On Nov 27, 12:36 pm, Rossko <ros...@culzean.clara.co.uk> wrote:
> > So now I have the marker but the clusterer doesn't work.
>
> The markercluster is doing what you tell it to do ... which is
> nothing.
> Go back to the documentation and read further down onhttp://google-maps-utility-library-v3.googlecode.com/svn/trunk/marker...

Rossko

unread,
Nov 27, 2010, 10:26:44 AM11/27/10
to Google Maps JavaScript API v3
> I suppose, i need to use addMarkers() but how it's work ?

You create a clusterer object, which you already do in your script as
'mc'
Then you need to add any markers to that object that you want it to
manage.
You can add them one at a time using addMarker()
Or you can add them in a bunch as an array using addMarkers()

> do you have
> an example ?

Here are examples, on exactly the same page
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

> I need tu use markerclusterer.js ?

Yes, if you want to have clustering.

Greg45

unread,
Nov 27, 2010, 11:26:33 AM11/27/10
to Google Maps JavaScript API v3
on the example the data are in json , my data are in xml so if I try
to use this script I have more error:
var markers = [];
for (var i = 0, dataPhoto; dataPhoto = data.photos[i]; i++) {
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);

I don't know how to modify this for get my markers in my xml ?

Do you know how to make this ?

On Nov 27, 4:26 pm, Rossko <ros...@culzean.clara.co.uk> wrote:
> > I suppose, i need to use addMarkers() but how it's work ?
>
> You create a clusterer object, which you already do in your script as
> 'mc'
> Then you need to add any markers to that object that you want it to
> manage.
> You can add them one at a time using addMarker()
> Or you can add them in a bunch as an array using addMarkers()
>
> > do you have
> > an example ?
>
> Here are examples, on exactly the same pagehttp://google-maps-utility-library-v3.googlecode.com/svn/trunk/marker...

Rossko

unread,
Nov 27, 2010, 12:07:13 PM11/27/10
to Google Maps JavaScript API v3
> on the example the data are in json , my data are in xml so if I try
> to use this script I have more error:

Doesn't matter, the clusterer is not interested in where the data
comes from that you use to build your markers.
You already have your script that builds markers from XML, why are tou
trying to add that part from the example. READ the example and
understand what the parts do, then you will be able to apply your
knowledge to your own script.

Here are important parts highlighted

>   var markers = [];

creates a global array to store your markers ; name it what you like.

> markers.push(marker);

stores each marker as it is created

>         var markerCluster = new MarkerClusterer(map, markers);

creates a clusterer, name it what you like, and gives it the array of
markers to work with.

An alternative way to set up a clusterer would be to create it "empty"
and then add your array of markers later (after you have finished
creating them all) using addMarkers()

If you cannot understand what is happening, you might have to be less
ambitious, or hire someone to do it for you.

Greg45

unread,
Dec 1, 2010, 5:48:04 AM12/1/10
to Google Maps JavaScript API v3
thx for you answer but I'm not a developper ! and I don't want pay for
make my website! I just want make this with help so sorry if I'm a
noob in DEV.

So I try to put this 3 lines in my function loadmap :

var markers = [];
markers.push(marker);
var markerCluster = new MarkerClusterer(map, markers);

I get an error -> Marker is not define ! Ok I make a variable global
marker at the beginning of the script and now I get my marker but not
clustered. Do you know why

Rossko

unread,
Dec 1, 2010, 6:31:32 AM12/1/10
to Google Maps JavaScript API v3
> So I try to put this 3 lines in my function loadmap :
>
> var markers = [];
> markers.push(marker);
> var markerCluster = new MarkerClusterer(map, markers);

It's going to be very difficult if you don't think about what you are
telling the code to do. Where you put code in the order of events is
just as important as what the code does.

So, in loadMap() ...

> var markers = [];
This will create an array called 'markers'
It is in local scope and won't be available after loadMap() has
completed.
You already have a global array called 'gmarkers' so I don't know what
this one is for at all.

> markers.push(marker);
You have this line before you have created any markers at all, so it
won't do anything useful.
That is what the script error was telling you.
Even if it did something, it wouldn't be very helpful as it would add
one marker to your array. You ought to be doing this inside the loop
where you are creating many markers, one at a time. So that as each
marker is created, it will be added to the array.

> var markerCluster = new MarkerClusterer(map, markers);
Again, this is before any markers have been created at all. As you
would like to pass in the markers that you want MarkerClusterer to
manage for you, it will work much better if you do this after all the
markers have been created and a copy of each one saved into whichever
array you choose to save them in and pass to the clusterer.

Greg45

unread,
Dec 1, 2010, 8:07:00 AM12/1/10
to Google Maps JavaScript API v3
ok I understand, the place in the script is more important , I think I
progress :

I have some marker clustered ! but In my script I compare marker for
put her in categorie and with my modification the function categorie
for hide or make appear catagorie doesn"t work . I think it's because
my code isn't at the goog place. So can you check if I'm in the right
way or not . Thx

http://greglg.free.fr/spotme/final.html

Rossko

unread,
Dec 1, 2010, 12:12:09 PM12/1/10
to Google Maps JavaScript API v3
> I have  some marker clustered ! but In my script I compare marker for
> put her in categorie and with my modification the function categorie
> for hide or make appear catagorie doesn"t work .

Okay, here we go beyond "how to use simple clustering Options", but it
can be done.
The clusterer can only do what you tell it.
If you have it managing a set of markers, and you would like to change
that set of markers, you have to write code to tell it.
You might do something like remove all the markers currently
displayed. Then pass the clusterer the new set of markers you would
like to see instead.

There are a number of things you need to think about here.
You'd probably want your clusterer object in global scope, so that you
can modify it later.
You will need an array of "selected" markers to pass to it, which
might be different from the existing array of all markers (that you
won't want to modify)
You'll need to change what your checkbox code does, so that it
recalculates the array of "selected" markers, clears the existing
clusters, and passes the new array to the clusterer.
As the cluster automatically hides and shows markers for itself, you
can probably do away with most of your hide/show code and allow the
cluster to do the work, based on what markers you pass to it.

Greg45

unread,
Dec 2, 2010, 5:16:17 AM12/2/10
to Google Maps JavaScript API v3
Oups! It's more difficult for a not developper ! Could you help me for
write the code ?
I need to use this fonction because my website is already online. I'm
not say write the code for me but just help me with a part of code.
Thanks for your help
Reply all
Reply to author
Forward
0 new messages