Display markers in the polygon I zoomed to

Question

Here is my example.

I add some code, and when the page is loaded it's possible to see only polygons what's great but when I zoomed to the polygon with this function I get all markers but my dream was to get only markers in the polygon I zoomed to so I need to resolve this problem with containsLocation but don't know how.

function kmlShowPlacemark(pm) {
    if (geoXmlDoc.placemarks[pm].polygon) {
        map.fitBounds(geoXmlDoc.placemarks[pm].polygon.bounds);
        addMarker(45.374632, 14.425697,'<b>93 Feet East</b><br/>150 Brick Lane, London  E1 6RU&lt;br/&gt;7 Dec 2010 : Jenny &amp; Johnny&lt;br/&gt;');
        addMarker(45.374632, 14.425697,'<b>93 Feet East</b><br/>150 Brick Lane, London  E1 6RU&lt;br/&gt;7 Dec 2010 : Jenny &amp; Johnny&lt;br/&gt;');
        addMarker(45.348674, 14.386749,'<b>Adelphi Theatre</b><br/>The Strand, London  WC2E 7NA&lt;br/&gt;11 Oct 2010 : Love Never Dies');
        addMarker(45.35051, 14.351883,'<b>Adelphi Theatre</b><br/>The Strand, London  WC2E 7NA&lt;br/&gt;11 Oct 2010 : Love Never Dies');
        addMarker(45.319618, 14.501915,'<b>Albany, The</b><br/>240 Gt. Portland Street, London  W1W 5QU');
        addMarker(45.339893, 14.475479,'<b>Aldwych Theatre</b><br/>Aldwych, London  WC2B 4DF&lt;br/&gt;11 Oct 2010 : Dirty Dancing');
        addMarker(45.343513, 14.436684,'<b>Alexandra Palace</b><br/>Wood Green, London  N22&lt;br/&gt;30 Oct 2010 : Lynx All-Nighter');
        addMarker(45.330736, 14.434211,'<b>Stan F.La Guardia 10</b><br/>Najbolji stan na svijetu');
        addMarker(45.385431, 14.357071,'<b>sdas</b><br/>dfsada');
     } 
for (var i=0;i<geoXmlDoc.placemarks.length;i++) {
 var placemark = geoXmlDoc.placemarks[i];
 if (i == pm) {
   if (placemark.polygon) placemark.polygon.setMap(null);
   if (placemark.polyline) placemark.polyline.setMap(map);

 } else {
   if (placemark.polygon) placemark.polygon.setMap(map);
   if (placemark.polyline) placemark.polyline.setMap(null);
   }
}
}

The next problem was partially solved. When u press Show all polygons (Prikaži sve kvartove) it's called function showAll and it show u all polygons but it must show you all polygons without markers. I try with two methods but it doesn't work for me marker.setVisible(false); and marker.setMap(null); and than I load basic page top.location="test2.php"; how is possible to resolve this better?

function showAll() {
    top.location="test2.php";
    map.fitBounds(geoXmlDoc.bounds); //show all bounds
    map.setZoom(13);
   //marker.setVisible(false);
   //marker.setMap(null); 
   for (var i=0;i<geoXmlDoc.placemarks.length;i++) {
       var placemark = geoXmlDoc.placemarks[i];
       if (placemark.polygon) placemark.polygon.setMap(map);
       if (placemark.polyline) placemark.polyline.setMap(map);
   }
 }

I tried to hide markers but my way is not good because after my way I don't see any markers any more, here is how I do it:

function hideMarkers(){
    for(var i=0; i<hmarkers.length; i++){
        hmarkers[i].setVisible(false);
    }
}    
<?
    $query = mysql_query("SELECT * FROM poi_example");
    while ($row = mysql_fetch_array($query)){
    $name=$row['name'];
    $lat=$row['lat'];
    $lon=$row['lon'];
    $desc=$row['desc'];
    echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
    echo 'hideMarkers();'
    }
?>

Answer 1

I would suggest adding all the markers to the map at the beginning (but hide them), keeping references to them in an array. Then when the Polygon is clicked, process through the array testing if google.maps.geometry.poly.containsLocation is true:

function kmlShowPlacemark(pm) {
  if (geoXmlDoc.placemarks[pm].polygon) {
    map.fitBounds(geoXmlDoc.placemarks[pm].polygon.bounds);
    for (var i=0;i<gmarkers.length;i++) {
      if (google.maps.geometry.poly.containsLocation(gmarkers[i].getPosition(),geoXmlDoc.placemarks[pm].polygon)) {
         gmarkers[i].setMap(map);
      } else {
         gmarkers[i].setMap(null);
      }
    }
  } 

   for (var i=0;i<geoXmlDoc.placemarks.length;i++) {
     var placemark = geoXmlDoc.placemarks[i];
     if (i == pm) {
       if (placemark.polygon) placemark.polygon.setMap(null);
       if (placemark.polyline) placemark.polyline.setMap(map);

     } else {
       if (placemark.polygon) placemark.polygon.setMap(map);
       if (placemark.polyline) placemark.polyline.setMap(null);
       }
   }
}

(note: the example below doesn't hide the markers to start, because I wanted to know where they are, clicking on a polygon hides all the markers outside the polygon and shows (again) the ones inside it) working example

To hide the markers when the are first added remove the "map" option from the addMarker function:

function addMarker(lat, lng, info) {
    var pt = new google.maps.LatLng(lat, lng);
    bounds.extend(pt);

    var marker = new google.maps.Marker({
        position: pt,
        icon: icon
    });
// rest of the code stays the same.