質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

Rails5 googlemapの画面が真っ白で表示されない

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 151

shimoner

score 3

googlemapの画面が真っ白で表示されなくて困っています。
もう二日間ほど調べても解決出来ず、このことばかり考えて、精神的に他の学習に集中できなくなっています。ご多忙なところ申し訳ございませんが、質問させていただきます。

【やりたいこと】
deviceで新規登録した住所(郵便番号)をもとに 緯度経度を取得して用いて、googlemapにピンを立てて表示したい(mapの画面が真っ白になります。。safariとfirefoxも表示出来ず、heigtとwidthは反映されている)
【開発環境】
MacOS
vagrant使用
Rails5
APIも有効化済み
httpリファラー、 制限 localhost:3000/*,
Chromので検証で調べても特にエラーはでていません。
gem geocoder使用

![イメージ説明]
イメージ説明

住所の予備だしは、はgemのgeocoder’にて登録した郵便番号から緯度経度を登録するだけでよろしいのでしょうか?
今回はdeviseのフォームで登録してるので別でformは作る必要がないので余計分からなくなっています。

(models/user.rb)

 geocoded_by :postal_code
  after_validation :geocode, if: :postal_code_changed?


にて登録できているので、おそらくmapに値がいってないのか?と予想しております。
自分自身特に郵便番号をgooglemapに渡すメソッドが無いことが気になっております。
testで緯度と経度を渡せていれば表示可能なのでしょうか?
(view/users/show.html)

<div class="row">
    <div class="col-xs-3">
        <h2>User info</h2>
        <%= render 'users/profile', user: @user %>
            <% unless current_user == @user %>
            <%= render 'relationships/follow_button', user: @user %>
            <% end %>
        <h2>New book</h2>
        <%= render 'books/newform', book: @book %>
    </div>
    <div class="col-xs-9">
        <h2>Books</h2>
        <!--books一覧 -->
        <table class="table table-hover table-inverse">
            <thead>
                <tr>
                    <th></th>
                    <th>Title</th>
                    <th>Opinion</th>
                    <th colspan="3"></th>
                </tr>
            </thead>
            <tbody>
                <% @books.each do |book| %>
                <tr>
                    <td>
                        <%= link_to user_path(book.user) do %>
                            <%= attachment_image_tag(book.user, :profile_image, :fill, 50, 50, fallback: "no-image-mini.jpg") %>
                        <% end %>
                    </td>
                    <td><%= link_to book.title, book_path(book), class: "book_#{book.id}" %></td>
                    <td><%= book.body %></td>
                </tr>
                <% end %>
            </tbody>
        </table>
                        <h2>gmap</h2>
    <div id="map"></div>
    <style>
        #map {
        height: 500px;
        width: 500px;
      }
    </style>
    <script>
      function initMap() {
        var uluru = {lat: <%= @user.latitude %>, lng: <%= @user.longitude %>};
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: uluru
            <% binding.pry %>
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAMRg3CeSmU__Ktjr4ND7PzXLaGk-cWKU">
    </script>
    </div>
</div>


@userを使っているのは今回deviceので登録した郵便番号を使いたかったからです。特に別でmap用のmodelやcontrollerは作っておりません。緯度、軽度のカラムはuserモデルに追加済みです。
<% binding.pry %>で調べて見たところ

[1] pry(#<#<Class:0x0000000004c48e30>>)> @user.latitude
=> 34.65269925
[2] pry(#<#<Class:0x0000000004c48e30>>)> @user.longitude
=> 135.47401085
[3] pry(#<#<Class:0x0000000004c48e30>>)> 


(user.controller)

class UsersController < ApplicationController
  before_action :authenticate_user!
  before_action :ensure_correct_user, only: [:edit, :update]

  def show
    @user = User.find(params[:id])
    @books = @user.books
    @book = Book.new

  end

  def index
    @users = User.all
    @book = Book.new
  end

  def edit
    @user = User.find(params[:id])
  end

  def update
    if @user.update(user_params)
      redirect_to user_path(@user), notice: "You have updated user successfully."
    else
      render "edit"
    end
  end

 def following
  @user = User.find(params[:id])
  @users = @user.followings
  end

def followers
  @user = User.find(params[:id])
  @users = @user.followers
end

  private
  def user_params
    params.require(:user).permit(:name, :introduction, :profile_image)
  end

  def ensure_correct_user
    @user = User.find(params[:id])
    unless @user.id == current_user.id
      redirect_to user_path(current_user.id)
    end
  end



end


gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.7'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.4', '>= 5.2.4.3'
gem 'actionpack', '>= 5.2.4.3'
gem 'activestorage', '>= 5.2.4.3'
gem 'activesupport', '>= 5.2.4.3'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '>= 3.12.6'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  gem 'capybara', '>= 2.15'
  gem 'rspec-rails'
  gem "factory_bot_rails"
  gem 'faker'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'devise'
gem 'refile', require: 'refile/rails', github: 'manfe/refile'
gem 'refile-mini_magick'
gem 'jquery-rails'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'jp_prefecture'
gem 'geocoder'
gem 'pry-rails'


(db/schema.rb)

# This file is auto-generated from the current state of the database. Instead
# of editing this file, please use the migrations feature of Active Record to
# incrementally modify your database, and then regenerate this schema definition.
#
# Note that this schema.rb definition is the authoritative source for your
# database schema. If you need to create the application database on another
# system, you should be using db:schema:load, not running all the migrations
# from scratch. The latter is a flawed and unsustainable approach (the more migrations
# you'll amass, the slower it'll run and the greater likelihood for issues).
#
# It's strongly recommended that you check this file into your version control system.

ActiveRecord::Schema.define(version: 2020_07_06_165516) do

  create_table "book_comments", force: :cascade do |t|
    t.text "comment"
    t.integer "user_id"
    t.integer "book_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

  create_table "books", force: :cascade do |t|
    t.string "title"
    t.text "body"
    t.integer "user_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

  create_table "favorites", force: :cascade do |t|
    t.integer "user_id"
    t.integer "book_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

  create_table "relationships", force: :cascade do |t|
    t.integer "user_id"
    t.integer "follow_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["follow_id"], name: "index_relationships_on_follow_id"
    t.index ["user_id", "follow_id"], name: "index_relationships_on_user_id_and_follow_id", unique: true
    t.index ["user_id"], name: "index_relationships_on_user_id"
  end

  create_table "users", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.string "reset_password_token"
    t.datetime "reset_password_sent_at"
    t.datetime "remember_created_at"
    t.string "name"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.text "introduction"
    t.string "profile_image_id"
    t.string "prefecture_code"
    t.string "postal_code"
    t.string "city"
    t.string "building"
    t.float "latitude"
    t.float "longitude"
    t.index ["email"], name: "index_users_on_email", unique: true
    t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
  end

end


(javascripts/aplication.js)

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require jquery.jpostal
//= require activestorage
//= require turbolinks
//= require bootstrap-sprockets
//= require gmaps/google
//= require_tree .


こちらには情報はしっかり入っております。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る