Google maps api v3 - multiple markers, multiple infowindows, 3 icons

Question

Hello, I wanna made "WiFi maps" and I have problem with do that, I wanna have 3 icons OPEN/WEP/WPA, and a lot of markers, and every marker with own infowindow, and only 1 infowindow on top, so when I will click #1 and then #2 then #1 will hide. And if I will have XXXX markers there will be problem with them on map in zoom out, there is possible to made it like when is much markers in one place all will not show in zoom out but in zoom in yes?

I have all info about networks in MySQL database, so in PHP will be easy to show it like in tutorial on official google maps documentation/v3/overlays.html#ComplexIcons <- so follow this can I have for example

  var nodes = [
['WKKOZ',50.192843,18.967801,nodewep,1],
['airlive',50.193056,18.967974,nodeopen,2],
['Zurawia-3',50.198398,18.974723,nodeopen,3],
['siec dol',50.19303,18.96796,nodewep,4],
['KP_8_1',50.193092,18.96801,nodewep,5],
['Natalia',50.19286,18.967812,nodewpa,6],
['Z104',50.192591,18.967588,nodewep,7],
['D2',50.192499,18.96876,nodewep,8],
['Niesia',50.192474,18.968239,nodewpa,9],
['boolean',50.192539,18.967545,nodewpa,10],
['neostrada_0d65',50.192179,18.96758,nodewep,11],
['neostrada_2d38',50.192216,18.96761,nodewep,12],
['Belkin_G_Wireless_9B7BF7',50.192191,18.969261,nodeopen,13],
['Trans_FijPn',50.1939,18.979565,nodeopen,14],
['dlinklis',50.193113,18.968024,nodewpa,15]

Please help me!:)

BTW: my MySQL database have format http://wklej.to/7Puw/html

Answer 1

I think you are asking about how to have a large number of markers on the map which get hidden at higher zoom levels. This is called marker clustering.

There are a few Javascript libraries that implement Clustering on the client side and are very easy to integrate into an existing mashup:

• MarkerClusterer - I used this for a mashup and found it easy to integrate, with a nice set of default icons.
• ClusterMarker - I haven't used this one, but it seems pretty functional.

You can also read this blog post which goes over the various alternatives or this blog post which discusses specifics on server side clustering.

Answer 2

I've gone through the exact same problem recently, and managed to sort most of this out with the help of Sean Vieira.

The answer to this question is here: http://stackoverflow.com/questions/2870670/multiple-infowindows-tearing-my-hair-out

The variation for your scenario is that you'd just add an additional field to your array in which you'd specify the URL path to the marker you wish to use.

Then, when looping through to create the marker (from var marker = new google.maps.Marker onwards), you'd call the value from your array for the icon variable.

As you only have three icon types, and I assume you would be populating your record from a DB, you'd test for the type of access point and then write the relevant URL path for the marker type in that place (I'm a ASP and not a PHP man, so excuse the use of the term write isn't correct).

My solution doesn't cleanly deal with infowindows. Once they are opened, they will stay open unless manually closed by the user. I have seen solutions out there to close others as a new one is opened, but haven't got to implementing them as yet.