Tutorial by Examples

In order to have google maps work properly with turbolinks, add the javascript tag directly to the layout header rather than including it in a view. # app/views/layouts/my_layout.html.haml !!! %html{:lang => 'en'} %head - # ... = google_maps_api_script_tag The google_maps_api_s...

Suppose, your users and/or groups have profiles and you want to display address profile fields on a google map. # app/models/profile_fields/address.rb class ProfileFields::Address < ProfileFields::Base # Attributes: # label, e.g. "Work address" # value, e.g. "Willy-Bran...

On the profile view, show the profile fields of a user or group in a list as well as the address fields on a google map. - # app/views/profiles/show.html.haml %h1 Contact Information .profile_fields = render @profile_fields .google_map{data: address_fields: @address_fields.to_json } The ap...

Suppose, there is a .google_map div, which will become the map, and which has the address fields to show as markers as data attribute. For example: <!-- http://localhost:3000/profiles/123 --> <div class="google_map" data-address-fields="[ {label: 'Work address', value: ...

Provided an App.GoogleMap coffee script class, the google map can be initialized like this: # app/assets/javascripts/google_maps.js.coffee # ... class App.GoogleMap map_div: {} map: {} constructor: (map_div)-> @map_div = map_div @init_map() @reference_the_map_as_dat...

Provided an App.GoogleMap coffee script class and the marker information being stored in the data-address-fields attribute of the .google_map div, the map markers can be initialized on the map like this: # app/assets/javascripts/google_maps.js.coffee # ... class App.GoogleMap # ... markers:...

Provided an App.GoogleMap coffee script class with the google.maps.Map stored as @map and the google.maps.Markers stored as @markers, the map can be auto-zoomed, i.e. adjusted that all markers are visible, like this: on the map like this: # app/assets/javascripts/google_maps.js.coffee # ... cla...

To display address profile fields as markers on a google map, the address field objects need to be passed as json objects to javascript. Regular database attributes When calling to_json on an ApplicationRecord object, the database attributes are automatically exposed. Given a ProfileFields::Addre...