title: google map Cannot read property 'open' of undefined
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on("click", "#searchRankingLocation", function() {
      map = new google.maps.Map(document.getElementById('map'), {
          center: {
              lat: 37.402040,
              lng: 127.107296
          }, //usepace
          zoom: 7
      });
      for (var i = 0; i &lt; locationList.length; i++) {
          markers[i] = new google.maps.Marker({
              map: map,
              draggable: true,
              animation: google.maps.Animation.DROP,
              position: locationList[i],
              title: rankingInfoList[i].name
          });
          infoList[i] = 'this area will changed.'
  
          windowNames[i] = new google.maps.InfoWindow({
              content: infoList[i]
          });
          google.maps.event.addListener(markers[i], 'click', function() {
              windowNames[i].open(map, markers[i]);
          });
  
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my source. <br>
  I can't show you windows, I tried to find a lot of solution but they did not help me!</p>