In my Rails app I have a helper method location that gets the coordinates for a given IP address and makes them available across all controllers and views. For example location.latitude returns the latitude of the user. You get the idea.

I also have some Javascript that draws a Map from the Google Maps API based upon a given lat/lon pair. The problem is that I have no idea how to pass the location params into the JavaScript!

The JavaScript resides in 'application.js' and looks like this:

$(document).ready(function() 
  { 

    //Map options...I want the params to go into the var 'MapOptions' below

    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(40.764698,-73.978972),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    //Setup and Draw the Map...
    //....................................
  };

The map itself gets called in the HTML like so. There isn't an obvious way to pass params.

<div id="map_canvas">
  <!-- The Map gets drawn here! -->
</div>

I know this is probably an obvious question, but I've never had to pass a parameter from my application to Javascript this way before.

In my Rails app I have a helper method location that gets the coordinates for a given IP address and makes them available across all controllers and views. For example location.latitude returns the latitude of the user. You get the idea.

I also have some Javascript that draws a Map from the Google Maps API based upon a given lat/lon pair. The problem is that I have no idea how to pass the location params into the JavaScript!

The JavaScript resides in 'application.js' and looks like this:

$(document).ready(function() 
  { 

    //Map options...I want the params to go into the var 'MapOptions' below

    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(40.764698,-73.978972),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    //Setup and Draw the Map...
    //....................................
  };

The map itself gets called in the HTML like so. There isn't an obvious way to pass params.

<div id="map_canvas">
  <!-- The Map gets drawn here! -->
</div>

I know this is probably an obvious question, but I've never had to pass a parameter from my application to Javascript this way before.

• javascript
• ruby-on-rails
• google-maps

4 Answers 4

I think data attributes work well here.

html

<div id="map_canvas" data-latitude="40.764698" data-longitude="-73.978972">
  <!-- The Map gets drawn here! -->
</div>

or with your helpers

<div id="map_canvas" data-latitude="<%= location.latitude %>" data-longitude="<%= location.longitude %>">
  <!-- The Map gets drawn here! -->
</div>

js

$(document).ready(function() { 

  //Map options...I want the params to go into the var 'MapOptions' below

  function initialize() {
    var mapDiv = $('#map_canvas');
    var lat = mapDiv.data('latitude'),
        lng = mapDiv.data('longitude');

    var mapOptions = {
      center: new google.maps.LatLng(lat,lng),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

  //Setup and Draw the Map...
  //....................................
};

You can assign lat and long to the hidden fields in the view. And in your applicatons.js script just get them like $("#lat").val() Not the ultimate solution, but should work well.

Passing data into javascript can be simplified with the help of Gon gem
For example, define anything with gon in your controller:

class FooController < ApplicationController

  def show_map
    #....
    gon.mapLatLong = [40.764698,-73.978972]

Next, output this erb tag in your view

<%= include_gon %>

The gon values defined in that controller will be change into javascript variables in your views. Thus, you can write it like this in your javascript

center: new google.maps.LatLng(gon.mapLatLong[0],gon.mapLatLong[1]),

reference:
https://github./gazay/gon
http://railscasts./episodes/324-passing-data-to-javascript

Take a look at the following page that explains how to pass data to JavaScript: http://railscasts./episodes/324-passing-data-to-javascript?view=asciicast

In short, just use:

<%= javascript_tag do %>
   window.productsURL = '<%= j products_url %>';
<% end %>

And then refer to productsURL anywhere in your scripts.