jqueryruby-on-railsgoogle-mapsgeocomplete

Unable to show maps in jquery.geocomplete

I am using jquery.geocomplete.js for getting autocomplete search when searching for an address. The app is a ruby on rails app and here is what I have done:

  1. Added <script src="http://maps.googleapis.com/maps/api/js?libraries=places"> to the layouts before the addition of application.js
  2. Geocomplete javascript to the app

  3. Added 

    ready = ->
  $('#geocomplete').geocomplete(map: "#map_canvas")

$(document).ready ready
$(document).on "page:load", ready

  4. SLIM:

    h1 Welcome

form
  input#geocomplete type="text" placeholder="Type in an address" size="90"
  input#find type="button" value="find"

#map_canvas

Autocomplete options works without any problem but map is not showing up. How do I get the map to show here?

Solution

  • Please add height attribute to div "map_canvas" to view map. eg.

     #map_canvas{:style => "height:250px;"}