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

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

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

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

JavaScript

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

Q&A

解決済

1回答

462閲覧

Rails GoogleAPIの位置情報のセット方法について

hk5232

総合スコア22

Ruby on Rails

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

JavaScript

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

0グッド

0クリップ

投稿2022/04/18 02:47

編集2022/04/18 18:50

RailsでグーグルマップのAPIを使った実装をおこなっています。
その際にマーカーをセットしたく、マーカーをセットする位置を決めるところでうまく動きません。

javascriot

1 // マーカー位置のセット 2 var markerLatLng = new google.maps.LatLng({ 3 lat: Number(markerData[i]['lat']), 4 lng: Number(markerData[i]['lng']) 5 });

console.log(markerLatLng)で見てみると

.Ye {lat: ƒ, lng: ƒ}
lat: ƒ ()
lng: ƒ ()
[[Prototype]]: Object

と表示されます。
console.log(Number(markerData[i]['lat']))や
console.log(Number(markerData[i]['lng]))で確認するとちゃんと

139.765
139.77

と出てくるのですが、それらをうまく位置(lat , lng)にセットできません。
なぜなのでしょうか。

追記

javascriot

1 // マーカー位置のセット 2 var markerLatLng = new google.maps.LatLng({ 3 lat: 139.765 4 lng: 77.123 5 });

などと直接数字を打っても同様です。
なぜなのでしょうか。

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

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

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

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

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

guest

回答1

0

ベストアンサー

console.log(markerLatLng)で見てみると

.Ye {lat: ƒ, lng: ƒ} lat: ƒ () lng: ƒ () [[Prototype]]: Object

と表示されます。

落ち着いてください。
これが正常動作です。

参考サイト:

オブジェクト指向言語でクラスをnewすると、雛形を元に生成したインスタンスが生えてきます。
質問文ではバッチリvar markerLatLng = new google.maps.LatLng(と記述しており、
newを使ってクラスからインスタンスを生成し、出来上がったインスタンスをmarkerLatLng変数に格納しています。

出来上がったインスタンスにはプロパティがいくつかぶら下がっており、
JavaScriptの場合、関数をプロパティとして設定している場合は「メソッド」と呼びます。

上記のリファレンスのどちらを見ても良いですが、
メソッドの欄を見ると見事にlng()lat()と表示されていますね。
こいつらはメソッドであり、数値ではないので関数が入っているのが正常です。


質問文は「どれどれ?ちゃんと値が入っているかな?」と確認したいと思うので次へ行きましょう。
実際にメソッドを実行してしまえば良いと思います。
使い方は普通の関数実行と同じく値のお尻に()を付けましょう。

js

1var markerLatLng = new google.maps.LatLng({ 2 lat: 139.765 3 lng: 77.123 4}); 5console.log("lat:", markerLatLng.lat()); 6console.log("lng:", markerLatLng.lng());

これを面倒に感じるのであれば、
公式サイトを見た感じ.toJSON()メソッドがあるのを確認したのでこうしても確認出来るかと思います。

js

1console.log(markerLatLng.toJSON());

投稿2022/04/18 09:02

miyabi-sun

総合スコア21158

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

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

hk5232

2022/04/18 09:50

なるほど。 これが正常な動作なんですね。 うまく動かない時に一つずつ中身を確認していき、 このlogの結果だったのでここが怪しいと思いずっと悩んでいました。 ありがとうございます! これで次に進めます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問