Use gmaps.js to search for address in a Google map

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<div id="map-canvas"></div>
<form method="post" id="geocoding_form">
  <label for="address">Address:</label>
  <div class="input">
    <input type="text" id="address" name="address" />
    <input type="submit" class="btn" value="Search" />
  </div>
</form>

CSS

#map-canvas {
  height: 200px;
  width: 400px;
}

JavaScript

var map;
var marker;

function initialize() {

  var myLatLng = new google.maps.LatLng(51.985, 5.8991);
  myOptions = {
    zoom: 7,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    marker = new google.maps.Marker({
      position: myLatLng,
      map: map
    });

  marker.setMap(map);
}


$('#geocoding_form').submit(function(e) {
  e.preventDefault();
  GMaps.geocode({
    address: $('#address').val().trim(),
    callback: function(results, status) {
      if (status == 'OK') {
        var latlng = results[0].geometry.location;
        map.setCenter(latlng);
      }
    }
  });
});

initialize();