title: Google Maps API v3 – Multiple Markers, Multiple Infowindows-Server Side VB.net
body: <p>I am working on a project using google maps api v3 and server side vb.net and am trying to make it so when a marker is clicked on a infowindow appears. I have accomplished this but now what i want is different content to be displayed when different markers are clicked on which i can't seem to figure out.</p>
  
  <pre><code>var markers = [
  
  &lt;asp:Repeater ID="rptMarkers" runat="server"&gt;
  &lt;ItemTemplate&gt;
              {
              "JSN": '&lt;%# Eval("JSN") %&gt;',
              "Address": "&lt;%# Eval("Address") %&gt;",
              "Postcode": "&lt;%# Eval("Postcode") %&gt;",
              "StartTime": "&lt;%# Eval("StartTime") %&gt;",
               "TownCity": "&lt;%# Eval("TownCity") %&gt;",
                "County": "&lt;%# Eval("County") %&gt;"
          }
  &lt;/ItemTemplate&gt;
  &lt;SeparatorTemplate&gt;
      ,
  &lt;/SeparatorTemplate&gt;
  &lt;/asp:Repeater&gt;
  ];
  
  
  
   function loadDefaultMap(lat,lng,index) {
   var mapOptions = {
              center: new google.maps.LatLng(lat, lng),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
          var infoWindow = new google.maps.InfoWindow();
          var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
   }
  
  
          function addMarkers() {
          // get address
          // In loop get each address (latitude,longitude)
          // call loadMap in each iteration
          if(markers.length &gt;0){
  
          /// ******************************** INITIALIZING  **********************
           var mapOptions = {
              center: new google.maps.LatLng(52.630886,1.297355),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
          var infoWindow = null;
          var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
          /// *********************************************************************
  
          var geocoder = new google.maps.Geocoder();
          for (i = 0; i &lt; markers.length; i++) {
  
              var data = markers[i];
              var icon='';            
              var Time=data.StartTime.split(':');
  
              infoWindow = new google.maps.InfoWindow({
  
              content:markers[i].Address +"&lt;br&gt;&lt;b&gt; "+markers[i].TownCity+" &lt;/b&gt;"+ markers[i].County
              });
              if(Time[0] &gt; 00 &amp;&amp; Time[0] &lt; 11){
               icon= '../../../Images/blue.png'
              }
              else
              {
               icon= '../../../Images/red.png'
              }
              var adrs= data.Address +" "+data.TownCity+" "+ data.County
              geocoder.geocode({ 'address': adrs }, function (results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
  
                     var lat = results[0].geometry.location.lat();
                     var lng = results[0].geometry.location.lng();
  
                     //********************ADDING MARKER****************************
  
                      var myLatlng = new google.maps.LatLng(lat,lng);
                      var marker = new google.maps.Marker({
                      position: myLatlng,
                      map: map,
                      title: data.Address +" "+data.TownCity+" "+ data.County,
                      icon: icon
                  });
  
  
  
                  (function (marker, data) {
                      google.maps.event.addListener(marker, "click", function (e) {
                          infoWindow.open(map, this);
                      });
                  })(marker, data);
                     //*************************************************************
  
                  }
  
          });
          }
          }else{
          loadDefaultMap(52.630886,1.297355,-1);
          }
          }
  
      function pageLoad() {         
          addMarkers();
     }
  </code></pre>
  
  <p>This always showed the last marker that was bound to map so the info window always appeared on the last marker.  i als try this but its not working.</p>
  
  <pre><code>for (var i = 0; i &lt; markers.length; i++) {
  var marker = markers[i];
  google.maps.event.addListener(marker, 'click', function () {
  infowindow.setContent(this.html);
  infowindow.open(map, this);
  
  });
  
  }
  </code></pre>
  
  <p>any help is appreciated. thanks!</p>