0

I'm using jQuery Geocode to handle mapping user input, including draggable markers with callbacks. Everything works great in a browser, full sized, but when I shrink the browser down to tablet or smartphone width, everything still works except the markers are no longer draggable. Has anyone else experienced this? I'll paste my geocode info here:

$ ->
  $("input.geocomplete").geocomplete
    details: "form.geocoder_form"
    detailsAttribute: "data-geo"
    blur: true
    map: "div.map_canvas"
    componentRestrictions: 
        country: "US"
    mapOptions:
        backgroundColor: 'white'
    markerOptions:
        draggable: true
        title: 'Your location'
    .bind "geocode:result", (event, result) ->
      console.log result
    .bind "geocode:dragged", (event, latLng) ->
      $("input.geocomplete").geocomplete("find", latLng.lat() + "," + latLng.lng());
    .bind "geocode:error", (event, status) ->
      console.log "Error: " + status
John Trichereau
  • 626
  • 9
  • 22

1 Answers1

0

Ok just figured it out, it was a problem with the HTML (this is using Twitter Bootstrap).

Not working:

<div class="row col-lg-6 col-xs-12">
  <div class="map_canvas"></div>
  <br>
</div>

Working:

<div class="row">
  <div class="col-lg-6 col-xs-12">
    <div class="map_canvas"></div>
  </div>
  <br>
</div>
John Trichereau
  • 626
  • 9
  • 22