Using gmaps4rails: A guide on extracting JSON data from the controller

Question

Using gmaps4rails: A guide on extracting JSON data from the controller

I have a model named shop and I want to create a simple alert box using JavaScript that shows the name of the shop when a marker on the map is clicked.

Here's my code:

# controller
@json = Shop.all.to_gmaps4rails do |shop, marker|
  marker.json({ id: shop.id, name: shop.name })
end

# view
<%= gmaps("map_options" => { auto_zoom: false, zoom: 2, class: "homepage-map" },
      "markers" => { data: @json,
                     options: { do_clustering: true,
                                clusterer_maxZoom: 11,
                                raw: "{ animation: google.maps.Animation.DROP }" }
                    })
%>

<% content_for :scripts do %>
<script type="text/javascript" charset="utf-8">
Gmaps.map.callback = function() {
  for (var i = 0; i <  this.markers.length; ++i) {
    google.maps.event.addListener(Gmaps.map.markers[i].serviceObject, 'click', function() {
      alert(put something here);
    });
  }
};
</script>
<% end %>

This is my first experience working with JSON, so I've researched some introductory articles about it and also looked into JSON in JavaScript. I'm curious about how to achieve this with gmaps4rails.

javascript ruby-on-rails-3 json google-maps gmaps4rails

Answer 1

Answer №1

You can use this code snippet to achieve the desired functionality:

<script type="text/javascript" charset="utf-8>
function handleMarkerClickClosure(marker) {
  return function() {
    alert(marker.name);
  }
}

Gmaps.map.callback = function() {
  for (var i = 0; i <  this.markers.length; ++i) {
    google.maps.event.addListener(Gmaps.map.markers[i].serviceObject, 'click', handleMarkerClickClosure(Gmaps.map.markers[i]) );
  }
};
</script>

Answer 2

You can use this code snippet to achieve the desired functionality:

<script type="text/javascript" charset="utf-8>
function handleMarkerClickClosure(marker) {
  return function() {
    alert(marker.name);
  }
}

Gmaps.map.callback = function() {
  for (var i = 0; i <  this.markers.length; ++i) {
    google.maps.event.addListener(Gmaps.map.markers[i].serviceObject, 'click', handleMarkerClickClosure(Gmaps.map.markers[i]) );
  }
};
</script>

Using gmaps4rails: A guide on extracting JSON data from the controller

Answer №1

Similar questions

Initiate activity when link is clicked

Switch the following line utilizing a regular expression

Transform this color matching game into an image matching game using JavaScript and jQuery

Is there a way in Angular Material to consistently display both the step values and a personalized description for each step?

Error in sending data to the server via the specified URL: "Http failure response for http://localhost/post.php: 0 Unknown Error" and POST request to http://localhost/post.php failed with error code

Angular 2: Enhancing User Experience with Pop-up Dialogs

Passing variables from ExpressJS to JavaScript can be a seamless process

PHP problem with encoding JSON using foreach loop

Is it feasible to place an ordered list within a table row <tr>?

Converting Enums to integers and back with Gson's versatile code

Inspection Techniques for Javascript Objects

I have been working on incorporating a menu item in React, but I keep encountering an error

Is it possible to use jQuery to refresh only a section of the page and modify the URL at the same time?

What type of technology is typically utilized in creating functional platforms such as goDaddy, wix, and other web design websites?

The component next/image is experiencing issues when used in conjunction with CSS

Using Lua to access indices from a table that was generated from JSON data

The Backbone Model is producing unspecified data

What is the best method to calculate the total of multiple input values from various cells and display it in the final cell of an Angular table?

Output a variable that is generated from invoking an asynchronous function

The link function fails to execute