CODEWITHSUNDEEP
javascriptruby-on-railsgoogle-maps-api-3
user836003
user836003

Reputation: 421

Google Maps and ROR 3.1

I'm trying to get the Google Maps 'Hello World' to work in ROR 3.1 using the following code:

in app/assets/javascripts/application.js

$(document).ready(function(){
    initialize($("div#map_canvas").get(0));
  });

function initialize(element) {
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(element, myOptions);
  alert("test");
}

in my model view partial app/views/rides/_ride.html.erb

<li>
  <div id="map_canvas" style="width:100%; height:100%"></div>
</li>

I have this in app/views/layouts/application.html.erb

 <%= javascript_include_tag :application,  
    "http://maps.googleapis.com/maps/api/js?sensor=false" %>

I'm new to ROR so any help with what I'm doing wrong is appreciated. It seems like the javascript is being run (the alert message appears) but the map never shows up.

Thanks.

Upvotes: 2

Views: 4690

Answers (2)

ahmet
ahmet

Reputation: 5005

In your view

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

In your Javascript

  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

In your CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }

And include this in your layout/application

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Upvotes: 2

Alok Swain
Alok Swain

Reputation: 6519

Firstly while using <%= javascript_include_tag :defaults %> that tag helper should automatically include the application.js (if it is present) at the end after it includes the other default js files.

The map isn't loading because the google map js file isnt included properly. The javascript_include_tag helper takes path to the javascript files, both relative and absolute. In your case it take the absolute path just with the parameters, it does not send the parameters like sensor=false. That is why you are getting the alert at the end of the code but the map isn't getting generated. If you check the HTML of the page where this is done then you will see that the js file that would be included is 

<script src="http://maps.googleapis.com/maps/api/js?sensor=false.js" type="text/javascript"></script>

which is wrong. Using the below line you could include it in a right way, as in the parameters would get passed correctly.

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type=text/javascript"> </script>

So use the HTML script tags to include the Google Map javascript.

jQuery methods for DOM manipulation etc. mostly return a jQuery object that isnt a HTML DOM element. The Google Map initialization for showing the map requires a DOM element that can be accessed by document.getElementById(id); (I think there might be a method that jQuery provides to convert a jQuery object to a DOM element, look it up.). Hope this helps, I could have posted a jsFiddle with the working code but decided to write all this up as the problem is also related to Rails. Let me know if you require further help.

Upvotes: 1

Related Questions