title: How to select multiple markers on google map
body: <p>I am New to google maps and php, Assume that I have 100 markers on map and I want to select some 15 markers from them if the markers clicked it changes the color of the marker and do some action..In this code If i click the marker it just show the popup which get the data's from database.</p>
  
  <p>Here is my google map initialize code using php ..any help friends</p>
  
  <pre><code> &lt;html&gt;
   &lt;head&gt;
   &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
   &lt;title&gt;Google Map API V3 with markers&lt;/title&gt;
   &lt;style type="text/css"&gt;
   body { font: normal 10pt Helvetica, Arial; }
   #map { width: 800px; height: 600px; border: 0px; padding: 0px; }
   &lt;/style&gt;
   &lt;script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false" type="text/javascript&gt;
   &lt;script type="text/javascript"&gt;
     var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
     new google.maps.Size(32, 32), new google.maps.Point(0, 0),
     new google.maps.Point(16, 32));
     var center = null;
     var map = null;
     var currentPopup;
     var bounds = new google.maps.LatLngBounds();
     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,
     map: map
     });
     var popup = new google.maps.InfoWindow({
     content: info,
     maxWidth: 300
     });
     google.maps.event.addListener(marker, "click", function() {
      if (currentPopup != null) {
       currentPopup.close();
       currentPopup = null;
       }
      popup.open(map, marker);
      currentPopup = popup;
      });
     google.maps.event.addListener(popup, "closeclick", function() {
     map.panTo(center);
     currentPopup = null;
     });
     }
     function initMap() {
     map = new google.maps.Map(document.getElementById("map"), {
     center: new google.maps.LatLng(0, 0),
     zoom: 5,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     mapTypeControl: false,
     mapTypeControlOptions: {
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
      },
     navigationControl: true,
     navigationControlOptions: {
     style: google.maps.NavigationControlStyle.SMALL
     }
     });
  
     &lt;?php
     $query = pg_query("SELECT * FROM example");
     while ($row = pg_fetch_array($query)){
     $name=$row['name'];
     $lat=$row['lat'];
     $lon=$row['lon'];
     $desc=$row['description'];
     echo ("addMarker($lat, $lon,&lt;b&gt;$name&lt;/b&gt;&lt;br/&gt;$desc');\n");
     }
     ?&gt;
  
     center = bounds.getCenter();
     map.fitBounds(bounds);
      }
     &lt;/script&gt;
     &lt;/head&gt;
     &lt;body onload="initMap()" style="margin:0px; border:0px; padding:0px;"&gt;
     &lt;div id="map"&gt;&lt;/div&gt;
     &lt;/html&gt;
  </code></pre>