Google maps rails crud sample application (I), creating a marker and saving its data in the database

OPEN On a previous post I mentioned something about . I have finally put together a database driven google maps CRUD demo (because crud is the new hello world!)

This demo rails app (called playgrounds) is written for Rails 4 (ruby 2.0.0) with gmaps4rails and you have the full code available for you to play with as usual. Its main purpose is to allow any user to store and modify spots on the map containing sport playgrounds (one per marker). I Tried to make this demo as good in terms of teaching how the thing works as possible as well as KISS This is the first post, covering the ‘C’ of the CRUD

A map callback

To create a new marker in the map we first define a callback function to the map event.

Learn more about google maps for rails

Other users read also this article
Google maps geocoding with rails

Geocoding an spot and showing the create form

The double click event provides both latitude and longitude to the geocoding function. The geocoding function works asynchronously so it does not return a direct result. Instead we must provide a callback function, to get the desired efect in the sample it is, function(data) {playgroundsNew(data);});

Showing the creation form inside an infowindow

The callback invokes the rails backend to obtain the content of the creation form. The ajax call provides rails with all the infomation required to store the spot.

For this example I have used infowindow for the shake of simplicity. Some developers plugins such as InfoBox or Bubbles to show more sofisticated modal windows. Please note how the events are added to the marker, to make its behaviour nicer and leave everything clean in the javascript world

Creating the geocoded point in the database, using respond_to in the controller

The previous form sends via :remote => true its contents. On the rails side the response is subject to respond_to

This way we just write our returning javascript directly on a js.erb template. In our case

This is the full process for creating an spot, hope you found it usefull, next posts will continue to explore the rest. Don’t forget to review the demo and the full code and enjoy!!!