implementing javascript library in rails app

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.

Anna Billstrom · Accepted Answer · 2012-06-06 22:29:40Z

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>

edited Jun 6, 2012 at 22:29

answered Jun 6, 2012 at 19:38

Anna Billstrom

2,50226 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

blaha Over a year ago

Thanks. The colon didn't help. This is the html generated, as seen in inspector: <script src="/assets/indexmap.js?body=1" type="text/javascript"></script>

Anna Billstrom Over a year ago

ah, the include tag should be "indexmap" (name of the js file), in quotes, you were right about that.

blaha Over a year ago

No error in the JS console. I feel like my mistake is in trying to use the javascript_include_tag in the div. My real question is what I need to put there to yield the map.

Anna Billstrom Over a year ago

Yeah, acc. to the gmaps.js site, you just need the CSS id and it should "just work" (famous last words). (so take out the javascript_include_tag in the div)

blaha Over a year ago

No, I'm still missing something big. I suspect that new GMaps(...); isn't enough javascript in indexmap.js.

|

Collectives™ on Stack Overflow

implementing javascript library in rails app

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related