Ruby on Rails如何将数据从控制器传递到html中的javascript

Question

I'm doing google maps on ruby on rails. I'm trying to implement dynamic marker text on the map.

I find a way to add marker text in java script. How can I pass my controller data( string data retrieved from database) to java?I've searched other posts but cant understand their answer.

The javascript in html is

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
 <script type="text/javascript" src="../src/markerwithlabel.js"></script>
 <script type="text/javascript">
 function initMap() {

 var latLng = new google.maps.LatLng(49.47805, -123.84716);
 var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

 var map = new google.maps.Map(document.getElementById('map_canvas'), {
   zoom: 12,
   center: latLng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 var marker1 = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   raiseOnDrag: true,
   map: map,
   labelContent: *"text"*,
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels", // the CSS class for the label
   labelStyle: {opacity: 0.75}
 });
 </script>

I want to replace this "text" to a variable called text,which copies @somestring from my controller,say gmaps_controller.rb

I have tried add text: "<%= @somestring %>" I put it just under var homelatlng,but no working.

I also have tried

$(document).ready(function(){
var text='<%=j @somestring%>'
})

I put this in a individual javascript tag after

<script type="text/javascript" src="../src/markerwithlabel.js"></script>

also not working.

Is there any otherway to pass data to controller?please tell me in detail Im quite a newbie. thanks in advance

Answer 1

how to pass data from controller to javascript in html

You can't access ruby variables in your assets . Your best bet would be to use html5 data attributes to pass data from your controller or rather i should say view to javascript. Lets suppose you have html element like this:

= link_to "some text", some_path, id: "some_id", data: {value: @some_value}  #where @some_value is set in your controller

and then access it like this in javascript

$(document).ready(function(){
  var text =  $("#some_id").data("value");
  // now text will contain some_value
});

Answer 2

Use gon gem.

step 1: add gem'gon' in your gemfile

step 2: run bundle install

step 3: add <%= include_gon %> in your view's header tag

step 4: add gon.yourpassdata="sometext" in your controller

step 5:get your data from your view,say alert(gon.yourpassdata)

done!

Answer 3

more clearer way to show map + dynamic marker on map + dynamic infowindow + clickable infowindows... .Just pass the required object and include the places js from google map...this code is ready to work.here i dynamically add markers to the map with infowindows using $.each and push it into the array

i raised the similar question here

in your controller...

def show_nearby_locations_to_guest
@nearbys = Place.near("#{params[:address]}", 5,:order => "distance",:units => :km).paginate(:page => params[:page], :per_page => 10)
end

_show_nearby_locations_to_guest.js.erb

in this js.erb(to update view with new map with dynamic markers keeping in mind you have this selector(anyother also) on the page you cliked) ,here i have a EMPTY map and replacing it with NEW map FILLED with dynamic markers

$("#map-canvas").html("<%= escape_javascript(render(:partial => 'show_nearby_locations_to_guest')) %>");

_show_nearby_locations_to_guest.html.erb

<%= javascript_tag do%>
/////use global variable instead of using data-attribute as my resultset can have 100+ records
window.nearbys= <%=raw @nearbys.to_json %>;
<%end%>


<script type="text/javascript">
var pinColor = "000000";
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
function initialize() {
// Display a map on the page
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
map.setTilt(45);
//emtpy array to add dynamic markers
var markers=[];
//emtpy array to add dynamic infowindows 
var infoWindowContent=[];
$.each(nearbys, function(index) {
markers.push([nearbys[index]['title'], nearbys[index]['latitude'],nearbys[index]['longitude']]);
infoWindowContent.push(['<div class="info_content" >' +
'<h3'+nearbys[index]['title']+'</h3>' +
'<p><i>'+nearbys[index]['about']+'</i></p>' +
'<p><a href="/places/show/'+nearbys[index]['id']+'" data-remote="true" title="view more">view more</a></p>' +
'</div>']);
});
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow({ maxWidth: 320 }), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+markers[i][0].charAt(0).toUpperCase()+"|FE7569|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: pinImage
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}//initialize ends
$(document).ready(function(){
$('#map-canvas').html("<p class='text-center text-alert'><b><i>Loading map...</i><i class='fa fa-spinner fa-spin fa-2x'></i></b></p>");
//load the map after 2 seconds so that the same code can work on modals as well
setTimeout('initialize()', 2000);