Search code examples
javascriptgoogle-mapsgmaps.js

Address search using google maps API (gmaps.js)

I'm new at programming and trying to create geo web app using gmaps.js. Currently I'm stuck at address searching.

Here the code in script.js file:

Creating map:

function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);

Creating search:

  GMaps.geocode({
  address: $('#adress').val(),
  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()
      });
    }
  }
});

and HTML:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDVwHmsoQeFb7vSpwpqlyJQHkn_147MpOw&sensor=false">
</script>
<script type='text/javascript' src="script.js"></script>
<script type='text/javascript' src="gmaps.js"></script>
</head>

<body>
    <div id="googleMap"></div>
    <div id="menu">
        <input type="text" id="adress" name="adress">
        <input type="submit" class="btn" value="Search">
    </div>
</body>
</html>

What i'm doing wrong?

Solution

  • You are Calling '#address' instead of '#adress' as your HTML tags are

    <input type="text" id="adress" name="adress">

    Its a Typo Mistake , Correct it and Get Back :)