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 .
こちらには情報はしっかり入っております。
あなたの回答
tips
プレビュー