CODEWITHSUNDEEP
javascriptjqueryruby-on-railsgoogle-maps
Bagus Trihatmaja
Bagus Trihatmaja

Reputation: 855

Google Maps not showing in partial view

I want to display google maps in partial view which I call it using jQuery. Here is the details:

In my dashboard.html.haml:

= link_to 'Map', preview_map_static_pages_path,  :remote => true

.col-sm-4.col-md-10
      #dashboard_preview

In my controller:

def preview_map
        respond_to do | format |
            format.js {render :layout => false}
        end
end

And in my preview_map.js.erb

$( "#dashboard_preview" ).html( "<%= escape_javascript( render "map/map" ) %>" );

And my map/_map.html.haml

#map-container
  #map-canvas

The problem is the map is not showing when I click = link_to 'Map', preview_map_static_pages_path, :remote => true. What did I do wrong? Sorry for the bad english. Thanks for your help :)

Upvotes: 0

Views: 849

Answers (1)

Byron Singh
Byron Singh

Reputation: 1398

You are rendering the map/_map.html using javascript AFTER the google maps javascript is run, that's why your map will not load. Try to include the google maps script into your map/_map.html.haml

#map-container
  #map-canvas

%script(src="https://maps.googleapis.com/maps/api/js?key=API_KEY")
:javascript
  var mapOptions = {
    center: { lat: -34.397, lng: 150.644},
    zoom: 8
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

another option is to call the google maps initialize function after you render map/_map in preview_map.js.erb

$( "#dashboard_preview" ).html( "<%= escape_javascript( render "map/map" ) %>" );
var mapOptions = {
  center: { lat: -34.397, lng: 150.644},
  zoom: 8
};
var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

Upvotes: 1

Related Questions