title: setMap() of google maps api not working
body: <p>I am building a map using the Google Maps API, and when I load it I get this error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'setMap' of undefined</p>
  </blockquote>
  
  <p>I think toggle() from vm() is causing error but I don't know how to correct it.
  My aim is to simultaneously display markers based on search.</p>
  
  <p>Here is the code:</p>
  
  <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>var locations = [
          {"name": "Marari Beach Alappuzha" ,'location': {'lat': 9.618406, 'lng': 76.340161} },
          {"name": "Tea Mueseum" ,'location': {'lat': 10.049198, 'lng': 77.051025 }},
          {"name": "Eravikulam National Park" ,'location': {'lat': 10.116233, 'lng': 77.067791} },
          {"name": "Chimmini Wildlife Sanctuary" ,'location': {'lat': 10.428646, 'lng': 76.491031} },
          {"name": "Bekal Fort ",'location': {'lat': 12.440895, 'lng': 75.030311 }}
        ]
  
  var markers = [];
  var map;
  var boolean = [];
  for(i=0;i&lt;locations.length;i++){
      boolean[i] = true;
  }
  function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {
              lat: 10.850516,
              lng: 76.271080
          }
      });
      var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      for (var i = 0; i &lt; locations.length; i++) {
          var position = locations[i].location;
          var name = locations[i].name;
          var marker = new google.maps.Marker({
              // map:map,
              position: position,
              animation: google.maps.Animation.DROP,
              id: i
          });
          markers.push(marker);
          marker.addListener('click', (function(marker, i) {
              return function() {
                  if (marker.getAnimation() != null) {
                      marker.setAnimation(null);
                  } else {
                      marker.setAnimation(google.maps.Animation.BOUNCE);
                      stopAnimation(marker);
                  }
              }
          })(marker, i));
  
          function stopAnimation(marker) {
              setTimeout(function() {
                  marker.setAnimation(null);
              }, 3000);
          };
      }
      toggle();
  }
  
  function toggle(){
      for(g=0;g&lt;locations.length;g++){
          if(boolean[g] === true){
              markers[g].setMap(map);
          }else if(boolean[g] === false){
              markers[g].setMap(null);
          }
      }
  }
  
  var z,g;
  var vm = function(){
      var self = this;
      self.loc = ko.observableArray(locations);
      self.query = ko.observable('');
      self.filteredloc = ko.computed(function () {
          z=0;
      var filter = self.query().toLowerCase();
      console.log(boolean);
      toggle();
      if (!filter) {
          return self.loc();
      } else {
          return ko.utils.arrayFilter(self.loc(), function (item) {
              boolean[z] = item.name.toLowerCase().indexOf(filter) !== -1;
              // console.log(boolean[z]+'in pos'+z);
               z++;
              return item.name.toLowerCase().indexOf(filter) !== -1;
          });
      }
  });
  
  };
  
  ko.applyBindings(new vm());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compaitable" content="IE-edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Neighbourhood Map&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"&gt;&lt;/script&gt;
      &lt;script defer src="mapping.js"&gt;&lt;/script&gt;
      &lt;script asyc defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZJYwSB-hwX7EXVNXtWo7HSjyPaJNmrWc&amp;callback=initMap"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div id="content" class="col-3"&gt;
                  &lt;div id="content_search"&gt;
                      &lt;form action="#"&gt;
                          &lt;input placeholder="Search…" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off"&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="content_data"&gt;
                      &lt;ul id="content_data--style" data-bind="template: {name:'location', foreach:filteredloc}"&gt;&lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-9"&gt;
                  &lt;h3 &gt;Neighbourhood Map&lt;/h3&gt;
                  &lt;div id="map"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="text/html" id="location"&gt;
          &lt;li&gt;
              &lt;strong data-bind="text: name"&gt;&lt;/strong&gt;
          &lt;/li&gt;
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>