CODEWITHSUNDEEP
javascriptruby-on-railsrubygoogle-mapsmodel-view-controller
samureira
samureira

Reputation: 263

Can't see on a Rails app a map for locations that I added using google maps

While trying to replicate a directory website, I needed my "Places" to have a location displayed on the page using the Google Maps. Here what I've done so far:

1º I got an API key for using Google Maps.

2º In order to function maps need longitude and latitude, therefore, to convert and adress to coordinates I used a gem called geocoder.

3º I added the latitude and longitude attributes (as float types) into the database, by running a migration and after inspection of the migration file I migrated it.

4º According to documentation, I updated my Place.rb model to ensure the geocoded address is validated.

5º I updated the Places view too with the coordinates fields.

6º After following the Google Developers Guide, here's what I've done.

@ /app/views/layouts/application.html.erb:

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"
    async defer></script>

@ /app/views/places/show.html.erb:

<div id="map-canvas" style = "width:230px; height:230px"></div>

@ ./app/views/places/show.html.erb:

<script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: <%= @place.latitude %>, lng: <%= @place.longitude %>},
          zoom: 8
        });
      }

      <% @reviews.each do |review| %>
        $(".score_<%= review.id %> ").raty({
          starOn: "<%= image_path('star-on.png') %>",
          starOff: "<%= image_path('star-off.png') %>",
          score: '<%= review.score %>',
          readOnly: true
        });
      <% end %>

        $(".average").raty({
          starOn: "<%= image_path('star-on.png') %>",
          starOff: "<%= image_path('star-off.png') %>",
          score: '<%= @place.total_average_rating %>',
          readOnly: true
        });      

</script>

I refresh the page, everything shows up with the exception of the Places location that I was expecting by using Google Maps.

Just in case, here's the full script of the App/Views/Layouts/Application.html file:

<!DOCTYPE html>
<html>
<head>
  <title>MyYelp App</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>

  <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"
    async defer></script>

</head>
<body>

<%= render "layouts/header" %>

<% flash.each do | type, message | %>
    <div class="alert alert-info fade-in">
        <button class="close" data-dismiss="alert">X</button>
        <%= message %>
    </div>
<% end %>

<% if current_page?(root_path) %>
  <div class="landing">
<% else %>
  <div class="container">
<% end %>

<%= yield %>
</div>

</body>
</html>

And the App/Views/Places/Show.html file:

<div class="row">
  <div class="col-md-3">
    <h3><%= @place.name %></h3>

    <div class="average">

    </div>

    <p><strong>Adress</strong><%= @place.address %></p>
    <p><strong>Phone</strong><%= @place.phone %></p>
    <p><strong>Website</strong><%= @place.website %></p>
    <p><strong>Description</strong><%= @place.description %></p>
    <div id="map-canvas" style = "width:230px; height:230px"></div>
  </div>

  <div class="col-md-9">
    <h3>Reviews by People</h3>
    <% if current_user %>
    <h5>New Review</h5>
    <%= render 'reviews/form' %>
    <h5>All Reviews</h5>
    <%= render @reviews %>
    <% end %>
  </div>

</div>

<script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: <%= @place.latitude %>, lng: <%= @place.longitude %>},
          zoom: 8
        });
      }

      <% @reviews.each do |review| %>
        $(".score_<%= review.id %> ").raty({
          starOn: "<%= image_path('star-on.png') %>",
          starOff: "<%= image_path('star-off.png') %>",
          score: '<%= review.score %>',
          readOnly: true
        });
      <% end %>

        $(".average").raty({
          starOn: "<%= image_path('star-on.png') %>",
          starOff: "<%= image_path('star-off.png') %>",
          score: '<%= @place.total_average_rating %>',
          readOnly: true
        });      
</script>

Upvotes: 2

Views: 268

Answers (1)

Narayon
Narayon

Reputation: 415

Your id of the map element - map-canvas - and the map var - document.getElementById('map') - don't match.

Upvotes: 2

Related Questions