Question

This has proven a difficult thing to Google. I know it seems like it should be easy to Google.

I’m trying to understand how to implement nice libraries like gmaps.js.

application.html.erb:

<%= javascript_include_tag :defaults %>
<%= javascript_include_tag "gmaps" %>

Not sure if both of those are necessary. I have gmaps.js in my /vendor/assets/javascripts folder, using rails 3.2.3. I would love to know if the former handles it.

app/assets/javascripts/indexmap.js:

new GMaps({
    div: '#map',
    lat: -12.043333,
    lng: -77.028333
});

index.html.erb:

<div id="themap">
    <%= javascript_include_tag("indexmap") %>
</div>

application.css:

#themap{
  display: block;
  width: 95%;
  height: 350px;
  margin: 0 auto;
  -moz-box-shadow: 0px 5px 20px #ccc;
  -webkit-box-shadow: 0px 5px 20px #ccc;
  box-shadow: 0px 5px 20px #ccc;
}

All I get is a blank box.

Answer 1

try “:gmaps” instead of “gmaps”.

Also, try right-click inspect on the box, and see if JS is throwing an error in Chrome’s inspector.

OK- update, figured it out.

You need to use Google Maps and JQuery to get this to work. There is no CSS per se, you need to establish the object in a jQuery document ready block. I’ve zipped a sample of this working (in a basic rails app).

Essentially, include jQuery and Maps above the gMaps.js, and then include some JS:

<server type="text/javascript">
$(document).ready(function(){
  map = new GMaps({
    div: '#map',
    lat: -12.043333,
    lng: -77.028333
  });
});
</script>
<div id="map" style="height:200px;width:200px;"></div>