2

i have made this simple app with gmaps.js but i need the search functions like they show it here:

http://hpneo.github.io/gmaps/examples/geocoding.html

i looked at the source code and all but it aint working.. The search button reloads the page...

my code is a follows:

<script>
    $('#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.lat(), latlng.lng());
            }
          }
        });
      });
</script>


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

<div id="map"></div>

the rest is loaded in from scripts.js you can see it in sourcecode. Why is this happening and how can i fix this?

The web app is located here, http://travelers.work/trein/

Shiva Traanman
  • 165
  • 6
  • I also have this in a pen without the search function, so it might be better to look at the code.. http://codepen.io/shiva112/pen/JGXoVJ – Shiva Traanman Dec 18 '15 at 09:01

1 Answers1

0

You need to change

map.setCenter(latlng.lat(), latlng.lng());

to 

map.setCenter(latlng);

because the search returns a LatLng object as a result, and that's what is needed as an input for setCenter.

Here's a JS demo with your code: http://jsfiddle.net/DuRhR/3/

EDIT after comments:

Alternatively, you can pass to setCenter a LatLngLiteral

map.setCenter({lat: latlng.lat(), lng: latlng.lng()});
user2314737
  • 27,088
  • 20
  • 102
  • 114