title: Adding unique info window to multiple markers
body: <p>I've been trying to add info windows to my markers and tried a lot of options which i've found on this site but nothing seems to work for me.</p>
  
  <p>My google maps has a custom image and filters.</p>
  
  <p>I hope someone can help me out with the coding for this.
  I want all markers to have its unique info window.</p>
  
  <p>Live action: (select a map first at the right)
  <a href="http://www.aroracraft.enjin.com/tesokr" rel="nofollow">Click here for live map</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;div id="map_canvas" style="background: #1B2D33;"&gt; &lt;/div&gt; &lt;/th&gt;
      &lt;th&gt;&lt;div id="sizer"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
      &lt;h2&gt;Spoiler Alert!&lt;/h2&gt;
      &lt;br&gt;Markers are disabled by default
      &lt;br&gt;Select the map to view map markers.
      &lt;br&gt;&lt;br&gt;
      &lt;form id="sizer" action="#" method="get" accept-charset="utf-8" value="1"&gt;
          &lt;select id="selector"&gt;
              &lt;option value="1"&gt;Select Map&lt;/option&gt;
              &lt;option value="1"&gt;Khenarthi's Roost&lt;/option&gt;
          &lt;/select&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;fieldset class="option1"&gt;
              &lt;label class="label_check" for="checkbox-01"&gt;&lt;input name="checkbox-01" id="checkbox-01" value="1" type="checkbox" /&gt;&lt;img src="http://www.budget-computing.nl/images/teso/markers/city.png"title="City"&gt;&lt;/label&gt;
              &lt;label class="label_check" for="checkbox-02"&gt;&lt;input name="checkbox-02" id="checkbox-02" value="2" type="checkbox" /&gt;&lt;img src="http://www.budget-computing.nl/images/teso/markers/wayshrine.png"title="Wayshrine"&gt;&lt;/label&gt;
              &lt;label class="label_check" for="checkbox-03"&gt;&lt;input name="checkbox-03" id="checkbox-03" value="3" type="checkbox"  /&gt;&lt;img src="http://www.budget-computing.nl/images/teso/markers/camp.png"title="Camp"&gt;&lt;/label&gt;
              &lt;label class="label_check" for="checkbox-04"&gt;&lt;input name="checkbox-04" id="checkbox-04" value="4" type="checkbox" /&gt;&lt;img src="http://www.budget-computing.nl/images/teso/markers/poi.png"title="Point of Interest"&gt;&lt;/label&gt;
              &lt;label class="label_check" for="checkbox-05"&gt;&lt;input name="checkbox-05" id="checkbox-05" value="5" type="checkbox"  /&gt;&lt;img src="http://www.budget-computing.nl/images/teso/markers/farm.png"title="Farm"&gt;&lt;/label&gt;
              &lt;label class="label_check" for="checkbox-06"&gt;&lt;input name="checkbox-06" id="checkbox-06" value="6" type="checkbox" /&gt;&lt;img src="http://www.budget-computing.nl/images/teso/markers/harbor.png"title="Harbor"&gt;&lt;/label&gt;
              &lt;label class="label_check" for="checkbox-07"&gt;&lt;input name="checkbox-07" id="checkbox-07" value="7" type="checkbox"  /&gt;&lt;img src="http://www.budget-computing.nl/images/teso/markers/cave.png"title="Cave"&gt;&lt;/label&gt;
              &lt;label class="label_check" for="checkbox-08"&gt;&lt;input name="checkbox-08" id="checkbox-08" value="8" type="checkbox" /&gt;&lt;img src="http://www.budget-computing.nl/images/teso/markers/castleruin.png"title="Castle"&gt;&lt;/label&gt;
              &lt;label class="label_check" for="checkbox-09"&gt;&lt;input name="checkbox-09" id="checkbox-09" value="9" type="checkbox" /&gt;&lt;img src="http://www.budget-computing.nl/images/teso/markers/skyshard.png"title="Skyshard"&gt;&lt;/label&gt;
          &lt;/fieldset&gt;
          &lt;br&gt; &lt;h2&gt; About the Map&lt;/h2&gt;
          &lt;br&gt;Welcome to the '' interactive map. 
          &lt;br&gt;
          &lt;br&gt;This map allows you to explore the world of The Elder Scrolls Online interactive.
          &lt;br&gt;You can select filters to show or disable points of interest on the world.
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/th&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.budget-computing.nl/teso_map/load_tiles.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.budget-computing.nl/teso_map/normalizedcoord.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.budget-computing.nl/teso_map/map/khenarthis_roost/center.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.budget-computing.nl/teso_map/markers.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function initialize() {
    var mapOptions = {
      center: mapcenter,
      zoom: 6,
      minZoom: 6,
      draggable: false,
      streetViewControl: false,
      mapTypeControl: true,
      mapTypeControlOptions: {
        mapTypeIds: ["map"]
      },
      panControl: false,
      panControlOptions: {
          position: google.maps.ControlPosition.TOP_Left
      },
      zoomControl: true,
      zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE,
          position: google.maps.ControlPosition.LEFT_Center
  }
    };
  
    var iconBase = 'http://www.budget-computing.nl/images/teso/markers/';
  
  
    //select the sizer here
          var sizer=$('#sizer input:checkbox');
  
  // Attach the map to the document
          map = new google.maps.Map(document.getElementById('map_canvas'),
              mapOptions);
  
            // hide the fieldsets on page load
            $(".option1").hide();
            // Connect the group of checkboxes to the select
  
            $("select").change(function() {
              var $this = $(this);
              if($this.val() === "1") {
                      // Link checkbox markers
                          sizer.change(function(e){
                            var props=0;
  
                            $.each(sizer,function(i,b){
                                props+=($(b).is(':checked'))?Math.pow(2,i):0;
                              });
  
                            for(var m=0; m &lt; markers1.length; m++){
                                var positions1 = markers1[m].setMap((props &amp; markers1[m].props ||!props)?map: null);
                            }
  
  
                          }).eq(0).trigger('change');
  
                        // Removing all the markers
  
                        for (i=0; i&lt; markers1.length; i++) {
                            markers1[i].setMap(null)
                        }
  
                        $(".option1").show();
                        newPos = new google.maps.LatLng(-47,0);
                        map.setZoom(6);
  
                    setTimeout(function() {
                        markers1=[new google.maps.Marker({
                            position: positions1[0],
                            map: map,
                            icon: iconBase + 'camp.png',
                            props: 4,
                            title: 'marker1'
                        }),new google.maps.Marker({
                            position: positions1[1],
                            map: map,
                            icon: iconBase + 'city.png',
                            props: 1,
                            title: 'marker2'
                        }),new google.maps.Marker({
                            position: positions1[2],
                            map: map,
                            icon: iconBase + 'wayshrine.png',
                            props: 2,
                            title: 'marker3'
                        }),new google.maps.Marker({
                            position: positions1[3],
                            map: map,
                            icon: iconBase + 'wayshrine.png',
                            props: 2,
                            title: 'marker4'
                        }),new google.maps.Marker({
                            position: positions1[4],
                            map: map,
                            icon: iconBase + 'poi.png',
                            props: 8,
                            title: 'marker5'
                        }),new google.maps.Marker({
                            position: positions1[5],
                            map: map,
                            icon: iconBase + 'poi.png',
                            props: 8,
                            title: 'marker6'
                        }),new google.maps.Marker({
                            position: positions1[6],
                            map: map,
                            icon: iconBase + 'poi.png',
                            props: 8,
                            title: 'marker7'
                        }),new google.maps.Marker({
                            position: positions1[7],
                            map: map,
                            icon: iconBase + 'poi.png',
                            props: 8,
                            title: 'marker8'
                        }),new google.maps.Marker({
                            position: positions1[8],
                            map: map,
                            icon: iconBase + 'poi.png',
                            props: 8,
                            title: 'marker9'
                        }),new google.maps.Marker({
                            position: positions1[9],
                            map: map,
                            icon: iconBase + 'cave.png',
                            props: 64,
                            title: 'marker10'
                        }),new google.maps.Marker({
                            position: positions1[10],
                            map: map,
                            icon: iconBase + 'castleruin.png',
                            props: 128,
                            title: 'marker11'
                        }),new google.maps.Marker({
                            position: positions1[11],
                            map: map,
                            icon: iconBase + 'farm.png',
                            props: 16,
                            title: 'marker12'
                        }),new google.maps.Marker({
                            position: positions1[12],
                            map: map,
                            icon: iconBase + 'farm.png',
                            props: 16,
                            title: 'marker13'
                        }),new google.maps.Marker({
                            position: positions1[13],
                            map: map,
                            icon: iconBase + 'farm.png',
                            props: 16,
                            title: 'marker14'
                        }),new google.maps.Marker({
                            position: positions1[14],
                            map: map,
                            icon: iconBase + 'harbor.png',
                            props: 32,
                            title: 'marker15'
                        }),new google.maps.Marker({
                            position: positions1[15],
                            map: map,
                            icon: iconBase + 'harbor.png',
                            props: 32,
                            title: 'marker16'
                        }),new google.maps.Marker({
                            position: positions1[16],
                            map: map,
                            icon: iconBase + 'skyshard.png',
                            props: 256,
                            title: 'marker17'
                        }),new google.maps.Marker({
                            position: positions1[17],
                            map: map,
                            icon: iconBase + 'skyshard.png',
                            props: 256,
                            title: 'marker18'
                        }),new google.maps.Marker({
                            position: positions1[18],
                            map: map,
                            icon: iconBase + 'skyshard.png',
                            props: 256,
                            title: 'marker19'
                        }),new google.maps.Marker({
                            position: positions1[19],
                            map: map,
                            icon: iconBase + 'skyshard.png',
                            props: 256,
                            title: 'marker20'
                        }),new google.maps.Marker({
                            position: positions1[20],
                            map: map,
                            icon: iconBase + 'skyshard.png',
                            props: 256,
                            title: 'marker21'
                        }),new google.maps.Marker({
                            position: positions1[21],
                            map: map,
                            icon: iconBase + 'skyshard.png',
                            props: 256,
                            title: 'marker22'
                        }),new google.maps.Marker({
                            position: positions1[22],
                            map: map,
                            icon: iconBase + 'skyshard.png',
                            props: 256,
                            title: 'marker23'
                      })];
  
                   },800)
              } 
               map.panTo(newPos);
  
            });
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.mapTypes.set('map', mapType);
    map.setMapTypeId('map');
    map.setZoom(1);
  
    markers1=[],
    numProps=8;   // The number of the groups
  
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  </code></pre>