call a javascript function from rails

Question

I am trying to populate a list of cities and also mark them on the maps, Using AJAX I am updating a div element with the list of cities and for each city element I am trying to call the addmarker() function which is supposed to add a marker on top of google maps. using firebug I can see a javascript tag with the function call, but the addmarker() is not being executed

What is the best approach to forcibly call the javascript function and also update the dom element ?

here is how my addmarker() looks like:

   function addmarker(lat,lng,title_new)
   { 
     new_marker = new google.maps.Marker({
             position: latlng_new,
             map: map,
             title:title
             }); 
   }

Here is how my html.erb file looks like

       <%= post.content %>
       <script type="javascript"> addmarker( <%= post.lat_long%>, <%= post.title%>);        
       </script>
   </div>

The DOM element is being updated after document has finished loading.

score 0 · Answer 1 · answered Sep 24 '19 at 22:27

Add this line in head tag of application.html.erb,

<%= yield(:head_tags) %>
</head>

And a portion of code similar to this in your page

    <% provide :head_tags do %>
    <meta name='turbolinks-visit-control' content='reload'>
    <script>

      var map;

      function initMap(lat, lng) {
        var myCoords = new google.maps.LatLng(lat, lng);
        var mapOptions = {
          center: myCoords,
          zoom: 13
        };
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
      }

      function addMarker(lat, lng) {
        var myCoords = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({
          position: myCoords,
          map: map
        });
      }

      document.addEventListener("DOMContentLoaded", function(){
        initMap(4.6564659, -74.1090423)
      });

      <% @cities.each do |city| %>
        document.addEventListener("DOMContentLoaded", function(){
          addMarker(<%= city.latitude %>,<%= city.longitude %>)
        });
      <% end %>

</script>
<% end %>

score 0 · Answer 2 · edited May 23 '17 at 12:29

I'm not too clear about what exactly you are doing, is this AJAX and how does addMarker work? Are you sure the document has been completely loaded before the function is called? Regardless, when you are populating each div with the city (I'm assuming you have some sort of loop through your response), the quickest and dirtiest way is to directly call your javascript function with each element. For instance in your view:

<% @response.each do |city| %>
    ... #whatever
    <script> 
        <%= "addMarker(#{city})" %>
    </script>
<% end >

You should note however, that this is obtrusive javascript and really ugly, so you may want to reconsider this approach. There are a lot of articles out there on this topic. Here's a quick one I found. I would instead pass in the whole result object to a javascript function at the top of the page that iterates through the results and adds the markers.

call a javascript function from rails

2 Answers2