title: Uncaught No element defined?
body: <p>I'm using <a href="https://i.stack.imgur.com/3VNav.jpg" rel="nofollow noreferrer">gmaps.js</a>. I'm getting the <code>Uncaught ReferenceError: gmaps.js:205 Uncaught No element defined.</code> The following screenshot shows how Chrome reports the error in the gmaps Javascripts:</p>
  
  <p>But i have it true in  <strong><a href="http://jsfiddle.net/mjgbchaa/5/" rel="nofollow noreferrer">jsfiddle</a></strong>, but same code on my localhost (XAMPP) problem.</p>
  
  <p><img src="https://i.stack.imgur.com/3VNav.jpg" alt="enter image description here"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var map = new GMaps({
      el: '#map',
      lat: -12.043333,
      lng: -77.028333,
      click: function(event) {
          map.removeMarkers();
          var lat = event.latLng.lat();
          var lng = event.latLng.lng();
          alert(lat + ', ' + lng);
          map.addMarker({
              lat: lat,
              lng: lng,
              draggable: true,
          });
      }
  });
  $('select,input').change(function() {
      var searchString = [$('select.Country').val(), $('select.Cities').val(), $('input#SearchDistrict').val()].join(', ');
      alert(searchString);
      GMaps.geocode({
          address: searchString.trim(),
          callback: function(results, status) {
              if (status == 'OK') {
                  var latlng = results[0].geometry.location;
                  map.setCenter(latlng.lat(), latlng.lng());
                  map.addMarker({
                      lat: latlng.lat(),
                      lng: latlng.lng()
                  });
              }
          }
      });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#map {
        width: 400px;
        height: 400px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
    &lt;script src="https://hpneo.github.io/gmaps/gmaps.js"&gt;&lt;/script&gt;
  &lt;form&gt;
      Country:
      &lt;select class="Country"&gt;
          &lt;option value="" selected="selected"&gt;&lt;/option&gt;
          &lt;option value="United States"&gt;United States&lt;/option&gt;
      &lt;/select&gt;
      Cities:
      &lt;select class="Cities"&gt;
          &lt;option value="" selected="selected"&gt;&lt;/option&gt;
          &lt;option value="New York"&gt;New York&lt;/option&gt;
      &lt;/select&gt;
      District:
      &lt;input type="text" id="SearchDistrict"&gt;
  &lt;/form&gt;
          &lt;div class="popin"&gt;
            &lt;div id="map"&gt;&lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am not able to fix this, so I need your support.What do i do?</p>