Address search using google maps API (gmaps.js)

StackOverflow https://stackoverflow.com/questions/20781371

Question

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?

Was it helpful?

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 :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top