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

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

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

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

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Ruby on Rails

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

JavaScript

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

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

1回答

2645閲覧

RailsでGoogle Maps APIを利用してデータベースのユーザー情報からマーカーを立てたい

DK3

総合スコア9

Ruby

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

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Ruby on Rails

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

JavaScript

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

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2020/04/29 10:27

前提・実現したいこと

RailsでGoogle Maps APIを利用して、データベースに登録済みユーザーの住所にマーカーを立てたい。ユーザーの住所から緯度・経度は取得済み。
ログイン済みの本人のみのマーカーを立てる事には成功したが、繰り返し処理にて全てのユーザー(3人)のマーカー立てができずに、ただマップが表示されているのみになる。

発生している問題・エラーメッセージ

マーカーが立たない。エラーメッセージは出ていない。

該当のソースコード

html

1<h2>map</h2> 2<div id='map'></div> 3 4<style> 5#map{ 6 height: 500px; 7} 8</style> 9 10<script> 11// ログインユーザー本人の位置を定義 12let your = { lat: <%=current_user.latitude %>, lng: <%=current_user.longitude %> }; 13 14// マップを生成 15function initMap(){ 16 let map = new google.maps.Map(document.getElementById('map'), { 17 center: your, //マップの中心 18 zoom: 10, //マップの解析度 19 mapTypeControl: false, //オプション 20 streetViewControl: false //オプション 21 }); 22 23 // 複数マーカーの作成 24 <% @users.each do |user| %> 25 (function() { 26 let marker = new google.maps.Marker({ 27 position: {lat: <%= user.latitude %>, lng: <%= user.longitude %>}, 28 map: map, 29 }); 30 }); 31 <% end %> 32} 33</script> 34 35<script async defer 36src="https://maps.googleapis.com/maps/api/js?key= <%= ENV['GOOGLE_MAP_API_KEY'] %> &callback=initMap"> 37</script>

試したこと

コードに直接、緯度・経度を入力する事により複数のマーカーが立つ事は確認済み。

補足情報(FW/ツールのバージョンなど)

Ruby(2.5.1)
Rails(5.2)

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

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

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

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

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

guest

回答1

0

ベストアンサー

js

1 (function() { 2 let marker = new google.maps.Marker({ 3 position: {lat: <%= user.latitude %>, lng: <%= user.longitude %>}, 4 map: map, 5 }); 6//}); 7 })(); // 実行すべし

投稿2020/04/29 16:49

kei344

総合スコア69606

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

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

DK3

2020/04/30 07:34

返信ありがとうございました! マーカーがたちました!()が必要だったのですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問