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

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

新規登録して質問してみよう
ただいま回答率
85.46%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

1149閲覧

GoogleMapAPIでのマーカーが消えません。

tani__san929

総合スコア61

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/03/31 13:19

編集2021/03/31 13:21

##ロードしない限り、前に検索した場所のマーカーが消えません。

現在、railsでGoogleMapAPIを使用し、地図検索機能を実装しております。
gem "geocooder"も導入し、検索したらその位置にマーカーが表示されるまで設定できました。

ただ、続けて検索すると
その前に検索した位置のマーカーが残り続けてしまいます。
おそらく、jsファイルの記述が足りていないか、
もしくはajax非同期をしているからなのか?とわからない状況です。

ご教授いただけると幸いです。

###画像
赤いマーカーが2つ残ってしまいます。
イメージ説明

###コード

Gemfile

1gem 'geocoder'

route.rb

resources :maps, only:[:index] get '/map_request', to: 'maps#map', as: 'map_request' #追記

index.html.erb

<div class="map-title"> <h2>地図検索</h2> <%= form_with url: map_request_path, method: :get do |f|%> <%= f.text_field :address %> <%= f.submit '地図表示' %> <% end %> </div> <div id='map'></div> <script src="https://maps.googleapis.com/maps/api/js?key=API_key&callback=initMap" async defer></script> API_keyには、発酵してあるAPIキーを入れております。質問のため、隠しております。

application.js

let mapInstance; function initMap() { mapInstance = new google.maps.Map(document.getElementById("map"), { center: { lat: 35.681236, lng: 139.767125 }, zoom: 15, }); }

map.js.erb

(function(){ // 位置情報をもつ変数を用意 let pos = new google.maps.LatLng( <%= @latlng[0] %>, //latitude <%= @latlng[1] %> //longitude ); mapInstance.setCenter(pos) let marker = new google.maps.Marker({ map: mapInstance, position: pos }); })()

###参考にしたサイト

https://qiita.com/tiara/items/4a1c98418917a0e74cbb#%E5%9C%B0%E5%90%8D%E3%81%A7map%E3%82%92%E7%A7%BB%E5%8B%95%E3%81%99%E3%82%8B

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

消していないから消えないのだと思います。
新しいマーカーを作る前に、下記で削除してみてください。

marker.setMap(null);

投稿2021/03/31 15:31

68user

総合スコア2005

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tani__san929

2021/04/01 01:13

コメントありがとうございます! やはり記述が足りなかったのですね!一度試してみます。 また、結果ご連絡痛います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問