前提・実現したいこと
スポットの共有アプリを作成しています。
マップを表示し、投稿機能からDBに保存した地点にマーカーを立てることは成功しているのですが情報ウィンドウの吹き出し表示ができません。
また、現在地も取得しているのですが、そちらは吹き出し表示ができています。
下記のコードですと、”現在地”の場所にDBから取り出してきたはずの"<%= post.map&.address %>"の住所が表示されています。
現在地の場所には”現在地”の情報ウィンドウを表示し、投稿機能から保存した地点にはそれぞれの"住所"の表示したいです。
該当のソースコード
ruby
1<script> 2 let map 3 let geocoder 4 5 function initMap(){ 6 geocoder = new google.maps.Geocoder() 7 if(!navigator.geolocation) { 8 alert('Geolocation APIに対応していません'); 9 return false; 10 } 11 12 navigator.geolocation.getCurrentPosition(function(position) { 13 latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 14 15 map = new google.maps.Map(document.getElementById('map'), { 16 center: latLng, 17 zoom: 12, 18 }); 19 20 marker = new google.maps.Marker({ 21 position: latLng, 22 map: map 23 }); 24 25 infoWindow = new google.maps.InfoWindow({ 26 content: "現在地" 27 }); 28 29 marker.addListener('click', function(){ 30 infoWindow.open(map, marker); 31 }); 32 33 <% @posts.each do |post| %> 34 35 pos = new google.maps.LatLng( 36 <%= post.map&.latitude %>, <%= post.map&.longitude %> 37 ); 38 39 default_marker = new google.maps.Marker({ 40 map: map, 41 position: pos, 42 icon: { 43 url: ' https://maps.google.com/mapfiles/ms/icons/green-dot.png', 44 scaledSize: new google.maps.Size(40, 40) 45 } 46 }); 47 infoWindow = new google.maps.InfoWindow({ 48 content: "<%= post.map&.address %>", 49 pixelOffset: new google.maps.Size(0, 5) 50 }); 51 52 marker.addListener('click', function(){ 53 infoWindow.open(map, marker); 54 }); 55 56 infoWindow.addListener('closeclick', function(){ 57 marker.setMap(null); 58 }); 59 <% end %> 60 61 var geocoder = new google.maps.Geocoder(); 62 63 map.addListener('click', function(e){ 64 geocoder.geocode({location: e.latLng}, function(results, status){ 65 if(status === 'OK' && results[0]) { 66 67 var marker = new google.maps.Marker({ 68 position: e.latLng, 69 map: map, 70 title: results[0].formatted_address, 71 animation: google.maps.Animation.DROP 72 }); 73 74 var infoWindow = new google.maps.InfoWindow({ 75 content: results[0].formatted_address, 76 pixelOffset: new google.maps.Size(0, 5) 77 }); 78 79 marker.addListener('click', function(){ 80 infoWindow.open(map, marker); 81 }); 82 83 infoWindow.addListener('closeclick', function(){ 84 marker.setMap(null); 85 }); 86 }else if(status === 'ZERO_RESULTS') { 87 alert('不明なアドレスです: ' + status); 88 return; 89 }else{ 90 alert('失敗しました: ' + status); 91 return; 92 } 93 }); 94 }); 95 }, function() { 96 alert('位置情報取得に失敗しました'); 97 }); 98 }
ruby
1posts.controller.rb 2 3lass PostsController < ApplicationController 4 before_action :authenticate_user! 5 6 def new; end 7 8 def create 9 @post = Post.new(post_params) 10 redirect_to root_path 11 if @post.save 12 flash[:notice] = "投稿が保存されました" 13 else 14 flash[:alert] = "投稿に失敗しました" 15 end 16 end 17 18 def index 19 @post = Post.new 20 @post.photos.build 21 @post.build_map 22 @posts = Post.limit(10).includes(:map, :photos, :user).order('created_at DESC') 23 end 24 25 def show 26 @post = Post.find_by(id: params[:id]) 27 end 28 29 def destroy 30 @post = Post.find_by(id: params[:id]) 31 if @post.user == current_user 32 flash[:notice] = "投稿が削除されました" if @post.destroy 33 else 34 flash[:alert] = "投稿の削除に失敗しました" 35 end 36 redirect_to root_path 37 end 38 39 private 40 41 def post_params 42 params.require(:post).permit(:caption, map_attributes: %i[address latitude longitude], photos_attributes: [:image]).merge(user_id: current_user.id) 43 end 44 45 def set_post 46 @post = Post.find_by(id: params[:id]) 47 end 48end
試したこと
ruby
1 <% @posts.each do |post| %> 2 3 pos = new google.maps.LatLng( 4 <%= post.map&.latitude %>, <%= post.map&.longitude %> 5 ); 6 7 default_marker = new google.maps.Marker({ 8 map: map, 9 position: pos, 10 icon: { 11 url: ' https://maps.google.com/mapfiles/ms/icons/green-dot.png', 12 scaledSize: new google.maps.Size(40, 40) 13 } 14 }); 15 infoWindow = new google.maps.InfoWindow({ 16 content: "<%= post.map&.address %>", 17 pixelOffset: new google.maps.Size(0, 5) 18 }); 19 20 marker.addListener('click', function(){ 21 infoWindow.open(map, marker); 22 }); 23 24 infoWindow.addListener('closeclick', function(){ 25 marker.setMap(null); 26 }); 27 <% end %>
現在地は表示ができているので、上記コードの位置に問題があると思い、コード位置を動かしてみたものの変化がなく、どう解決したらよいか分からずにいます。
ネットで記事を探しましたが見つけられず、解決策や試行案を教えて頂けると幸いです。
確認漏れや疑問点などありましたらご指摘ください。
よろしくお願いいたします。
補足情報(FW/ツールのバージョンなど)
Rails 6.1.4.1
Mac OS
docker
あなたの回答
tips
プレビュー