wordpress-step-6.html

<h2><span style="color: #b33605;">Step 6: Add Geolocator and Google Maps</span></h2>
To mark your location on the map, we need to add two gems: one to calculate your position, one to display it on the map.
Let's start with implementing the geolocation to the attendee profile.<br />

Open <strong>Gemfile</strong> in the project and add
<pre class="brush:ruby">gem 'geocoder'</pre>
<code></code>and
<pre class="brush:ruby">gem 'gmaps4rails'</pre>
<code></code>under the line
<pre class="brush:ruby">gem 'carrierwave'</pre>
In the <strong>Terminal/Command Prompt</strong> run:
<code></code>
<pre class="brush:shell">bundle</pre>
<code></code>and then:
<code></code>
<pre class="brush:shell">rails generate migration AddLatitudeAndLongitudeToAttendee latitude:float longitude:float
rake db:migrate</pre>
Open <strong>app/models/attendee.rb</strong> and add
<code></code>
<pre class="brush:ruby">geocoded_by :address
after_validation :geocode</pre>
<code></code>after
<pre class="brush:ruby">mount_uploader :picture, PictureUploader</pre>

We are going to include the Google Maps javascript API to display a map.<br/>
Open <strong>app/views/layouts/application.html.erb</strong> and add

<pre class="brush:ruby">&lt;%= javascript_include_tag "//maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry" %&gt;
&lt;%= javascript_include_tag "//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" %&gt;</pre>

above

<pre class="brush:ruby">&lt;%= stylesheet_link_tag "application", :media => "all" %&gt;</pre>

The Google Maps javascript needs another javascript called underscore.js to work. Our next task is to download it and integrate it into our app.<br/>

Open <a href="http://underscorejs.org" target="_blank">http://underscorejs.org</a> in your Browser, scroll down to Downloads and save the Development Version as <strong>app/assets/javascripts/underscore.js</strong>.

Add to <strong>app/assets/javascripts/application.js</strong>

<pre class="brush:ruby">//= require underscore
//= require gmaps/google</pre>

above

<pre class="brush:ruby">//require_tree .</pre>

<p><span style="color: #b33605;"><strong>Coach: Talk a bit about the Javascript libraries that we just included and what they can be used for.</strong></span></p>

We have to tell the map on which coordinates a marker should be displayed. We load that data in our AttendeesController and store it in an instance variable @markers, that we can access in the view.<br/>

Open <strong>app/controllers/attendees_controller.rb</strong> and add

<pre class="brush:ruby">@markers = Gmaps4rails.build_markers(@attendees) do |attendee, marker|
  marker.lat attendee.latitude
  marker.lng attendee.longitude
end</pre>

to the index action below

<pre class="brush:ruby">@attendees = Attendee.all</pre>

Add in <strong>app/views/attendees/index.html.erb</strong>

<pre class="brush:ruby">&lt;script type="text/javascript"&gt;
  function initialize_map() {
    handler = Gmaps.build('Google');
    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function() {
      markers = handler.addMarkers(<%= raw @markers.to_json %>);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
    });
  }
  google.maps.event.addDomListener(window, "load", initialize_map);
&lt;/script&gt;

&lt;div id="map"&gt;&lt;/div&gt;</pre>

below

<pre class="brush:ruby">&lt;h1&gt;Listing attendees&lt;/h1&gt;</pre>

Now you need to restart the Rails server process in <strong>Terminal/Command Prompt</strong>.
To show the attendees you've already added, you need to <strong>update their profiles</strong>.

<h2 style="text-align: center;"><strong><a href="/apptutorial/rails-girls-app-tutorial-step-6/rails-girls-app-tutorial-step-5/"> &lt; Step 5</a><span style="color: #d33605;">                              </span></strong><a style="text-align: right;" href="/apptutorial/rails-girls-app-tutorial-step-6/rails-girls-app-tutorial-next-steps/"><strong><span style="color: #d33605;">Next Steps &gt;</span></strong></a></h2>