Javascriptでモデル情報を数値変換して、地図を表示させたい。(googlemapAPI)

Question

###前提・実現したいこと
@shop.latitudeと@shop.longitudeには緯度、経度の情報は入っている状態。
この二つをの情報を使用して、mapに表示させたい。

###発生している問題・エラーメッセージ
@shop.latitudeと@shop.longitudeを数値情報に変換したいんですけど、変換方法がわかりません。。

###該当のソースコード
_map.html.slim

#map

maps.scss

#map {
  height: 500px;
  width: 100%;
}

maps.js.coffee

window.initMap = ->
  mapLatLng = new (google.maps.LatLng)(
    lat: 43.0816
    lng: 141.347)
  map = new (google.maps.Map)(document.getElementById('map'),
    center: mapLatLng
    zoom: 19)

これだとちゃんと地図が表示される。

しかし
maps.js.coffee

window.initMap = ->
  mapLatLng = new (google.maps.LatLng)(
    lat: ("@shop.latitude")
    lng: ("@shop.longitude"))
  map = new (google.maps.Map)(document.getElementById('map'),
    center: mapLatLng
    zoom: 19)

これだと、地図情報が表示されません。

lat: ("@shop.latitude")
lng: ("@shop.longitude")

エラーメッセージ

InvalidValueError: in property lat: not a number

latとlngへの値の与え方がいけないのだと思うのですが、どなたか教えてください。宜しくお願いします。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
地図の表示の仕方は参考ドキュメントを見て理解できたのですが、javascriptの勉強不足で、数値の与え方に詰まっている状態です。。

Comments

[kei344]

出力されたJavaScriptを記載してみてはいかがでしょうか。

[kentah]

完全に忘れてました。コメントありがとうございます！

Answer 1

lat: @shop.latitude
lng: @shop.longitude
でいけません？

Comments

[kentah]

コメントありがとうございます！
```
Uncaught TypeError: Cannot read property 'latitude' of undefined
```
プロパティが未定義だそうです。

[turbgraphics200]

lat: shop.latitude
lng: shop.longitude
だとどうです？

[kentah]

コメントありがとうございます！

```
Uncaught ReferenceError: shop is not defined
```
shopの中にあるデータが定義されていないみたいです。

[turbgraphics200]

@shopはどの時点で定義され、値を設定しているのでしょうか？

[kentah]

shopはmodelにて定義されています。
そのmodelにlatitude、longitudeのデータを付与しています。
`_map_html.slim`のviewに
```
p = @shop.latitude
p = @shop.longitude
```
を書くと、数値は出力されます。

[turbgraphics200]

すいません、いったん、
window.initMap = ->
の行の前に
latlon = {
lat: @shop.latitude
lng: @shop.longitude
}
として、変数に代入して
window.initMap = ->
mapLatLng = new (google.maps.LatLng)(latlng)
変数を使用して実行してみてください。