I have a form that implements a Google map with the Google places library (demo, as an aside, in JSFiddle, if I add gmaps.js as a script reference it won't work but if I add it as a script element in the HTML section the exact same script works fine) that looks like so:

<form action="#" method="post">
  <table class='Information table table-bordered'>
    <caption>Information</caption>
    <colgroup>
      <col width='100' />
      <col/>
    </colgroup>
    <tbody>
      <tr>
        <th>Location</th>
        <td>
          <div class="input-append">
            <input type="text" name="Lat" value="37.771424" />
            <span class="add-on">lat.</span>
          </div>
          <div class="input-append">
            <input type="text" name="Lng" value="-122.41332799999998" />
            <span class="add-on">lng.</span>
          </div>
        </td>
      </tr>
      <tr>
        <th>Map</th>
        <td>
          <div id="panel">
            <form class="form-search">
              <input type="text" class="input-medium search-query" autoplete="off" id="target" placeholder="Search Box"/>
            </form>
          </div>
         <div id="ScavengerMap"></div>
        </td>
      </tr>
    </tbody>
  </table>
</form>

With the following JavaScript:

var input = document.getElementById('target'),
  searchBox = new google.maps.places.SearchBox(input),
  map = new GMaps({
    div: '#ScavengerMap',
    lat: 37.771424,
    lng: -122.41332799999998
  });
google.maps.event.addListener(searchBox, 'places_changed', function () {
  var places = searchBox.getPlaces(),
    location;
  if (places.length > 0) {
    location = places[0].geometry.location;
    map.removeMarkers();
    map.setCenter(location.jb, location.kb);
    map.addMarker({
      lat: location.jb,
      lng: location.kb,
      title: "Slim\'s",
      draggable: true,
      dragend: function (e) {
          var point = e.latLng;
          $('input[name=Lat]').val(point.lat());
          $('input[name=Lng]').val(point.lng());
      }
    });
    $('input[name=Lat]').val(location.jb);
    $('input[name=Lng]').val(location.kb);
  }
});

map.addMarker({
  lat: 37.771424,
  lng: -122.41332799999998,
  title: "Slim\'s",
  draggable: true,
  dragend: function (e) {
    var point = e.latLng;
    $('input[name=Lat]').val(point.lat());
    $('input[name=Lng]').val(point.lng());
  }
});

When you type something in the search box ("Slim's" for example) you will see a set of suggestions from the Google Places library. If you select one, it is supposed to draw a marker at that location, but instead I get these two errors:

too much recursion
[Break On This Error]   

...))};sa(fg[E],function(a){var b=this.ua,c=Sf(a);b[c]&&(delete b[c],O[m](this,vf,a...

{main,places}.js (line 26)
too much recursion
[Break On This Error]   

....route=function(a,b){Mf("directions",function(c){c.pi(a,b,!0)})};function P(a,b,...

The thing that I'm having a hard time working out is why. The code that is in this demo is a subset of the code in my project, but both present the same issue. I can't find any information about a Google Places Library or Google Maps API outage, and weirder still this exact same code worked as early as 2 weeks ago (the time I wrote it). Any ideas about how I could at least isolate the problem?

I have a form that implements a Google map with the Google places library (demo, as an aside, in JSFiddle, if I add gmaps.js as a script reference it won't work but if I add it as a script element in the HTML section the exact same script works fine) that looks like so:

<form action="#" method="post">
  <table class='Information table table-bordered'>
    <caption>Information</caption>
    <colgroup>
      <col width='100' />
      <col/>
    </colgroup>
    <tbody>
      <tr>
        <th>Location</th>
        <td>
          <div class="input-append">
            <input type="text" name="Lat" value="37.771424" />
            <span class="add-on">lat.</span>
          </div>
          <div class="input-append">
            <input type="text" name="Lng" value="-122.41332799999998" />
            <span class="add-on">lng.</span>
          </div>
        </td>
      </tr>
      <tr>
        <th>Map</th>
        <td>
          <div id="panel">
            <form class="form-search">
              <input type="text" class="input-medium search-query" autoplete="off" id="target" placeholder="Search Box"/>
            </form>
          </div>
         <div id="ScavengerMap"></div>
        </td>
      </tr>
    </tbody>
  </table>
</form>

With the following JavaScript:

var input = document.getElementById('target'),
  searchBox = new google.maps.places.SearchBox(input),
  map = new GMaps({
    div: '#ScavengerMap',
    lat: 37.771424,
    lng: -122.41332799999998
  });
google.maps.event.addListener(searchBox, 'places_changed', function () {
  var places = searchBox.getPlaces(),
    location;
  if (places.length > 0) {
    location = places[0].geometry.location;
    map.removeMarkers();
    map.setCenter(location.jb, location.kb);
    map.addMarker({
      lat: location.jb,
      lng: location.kb,
      title: "Slim\'s",
      draggable: true,
      dragend: function (e) {
          var point = e.latLng;
          $('input[name=Lat]').val(point.lat());
          $('input[name=Lng]').val(point.lng());
      }
    });
    $('input[name=Lat]').val(location.jb);
    $('input[name=Lng]').val(location.kb);
  }
});

map.addMarker({
  lat: 37.771424,
  lng: -122.41332799999998,
  title: "Slim\'s",
  draggable: true,
  dragend: function (e) {
    var point = e.latLng;
    $('input[name=Lat]').val(point.lat());
    $('input[name=Lng]').val(point.lng());
  }
});

When you type something in the search box ("Slim's" for example) you will see a set of suggestions from the Google Places library. If you select one, it is supposed to draw a marker at that location, but instead I get these two errors:

too much recursion
[Break On This Error]   

...))};sa(fg[E],function(a){var b=this.ua,c=Sf(a);b[c]&&(delete b[c],O[m](this,vf,a...

{main,places}.js (line 26)
too much recursion
[Break On This Error]   

....route=function(a,b){Mf("directions",function(c){c.pi(a,b,!0)})};function P(a,b,...

The thing that I'm having a hard time working out is why. The code that is in this demo is a subset of the code in my project, but both present the same issue. I can't find any information about a Google Places Library or Google Maps API outage, and weirder still this exact same code worked as early as 2 weeks ago (the time I wrote it). Any ideas about how I could at least isolate the problem?

• javascript
• google-maps-api-3

Share Improve this question Follow edited Aug 7, 2013 at 0:52 Jason Sperske asked Aug 7, 2013 at 0:36 Jason SperskeJason Sperske 30.5k88 gold badges7676 silver badges127127 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Looks like I figured it out. It seems the properties .jb and .kb have been renamed. The correct method to grab lat and lng is by calling .lat() and .lng() on the places[0].geometry.location object. My mistake for following an example too closely :)

You can check a about your zoom setting too. If you don't have a number for zoom setting this problem will appear.