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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Google API

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

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

JavaScript

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

受付中

Javascriptで作成したGoogleMapAPIのデータをRubyonRailsのhtml.erbに読み込む方法

ni7035
ni7035

総合スコア0

Google API

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

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

JavaScript

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

1回答

0評価

0クリップ

646閲覧

投稿2019/06/27 02:08

編集2022/01/12 10:55

前提・実現したいこと

Javascript(toppages.js)で作成したGoogleMApAPI(JSON.parse?)のデータをRubyonRailsのview/toppages/index.html.erbの<div id="map"></div>に読み込みたいです。
toppages.jsではなく、toppages.coffeeでも実行できますか?

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

・toppages.coffeeにJavascriptのコードを書いて実行したエラーがでます。 エラーメッセージ:ExecJS::RuntimeError in Toppages#index Showing /home/ec2-user/environment/maps/app/views/layouts/application.html.erb SyntaxError: [stdin]:5:1: reserved word 'function' <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>

該当のソースコード

javascript

function httpGet(theUrl){ var xmlHttp = new XMLHttpRequest(); xmlHttp.open( "GET", theUrl, false ); xmlHttp.send( null ); return xmlHttp.responseText; } function getBikeStations(){ var jsonStations = httpGet("https://api.bsmsa.eu/ext/api/bsm/gbfs/v2/en/station_information"); var json = JSON.parse(jsonStations); return json.data.stations; } var stations = getBikeStations(); var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: new google.maps.LatLng(41.409651, 2.183685), mapTypeId: google.maps.MapTypeId.ROADMAP }); for (var i = 0, length = stations.length; i < length; i++) { var data = stations[i], latLng = new google.maps.LatLng(data.lat, data.lon); var marker = new google.maps.Marker({ position: latLng, map: map, name: data.name }); } var infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker, "click", function(e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); }
toppages/index.html.erbのコードです。 <div id="map"></div> <% if logged_in? %> <p>ログイン完了ユーザ: <%= current_user.name %> </p> <% else %> <%= link_to 'Sign up now!', signup_path, class: 'btn btn-lg btn-primary' %> <% end %>

試したこと

app/assets/javascripts/toppages.coffeeではなく、app/assets/javascripts/toopages.jsを作成し、googleMapAPIを表示するプログラミングを書いた。
gem 'execjs', '~> 2.7'、gem 'therubyracer'、gem "jquery-rails"を追加。
ちなみにapplication.jsには、
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery
//= require jquery_ujs
このように書かれています。

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

AWSのcloud9を使用しています。
ここにより詳細な情報を記載してください。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2019/06/27 02:11

>RubyonRailsに表示する方法 表示するのはあくまでHTMLなので表現調整されたほうが良いと思います。
ni7035
ni7035

2019/06/27 02:18

表現調整とは、どういうことなのでしょうか? html\.erbに<script type="text/javascript"></script>直接書くということですか?
m.ts10806
m.ts10806

2019/06/27 02:21

いいえ違います。 タイトル「GoogleMapAPIのデータをRubyonRailsに表示する方法」とありますが、RubyonRailsはあくまでフレームワークであって表示するのは結局HTML、クライアントサイドの仕事なので「タイトルの文言を調整してください」という意味です。 概念が違うものを一緒にしてしまっては話が通じなくなります。
ni7035
ni7035

2019/06/27 02:22

わかりました。修正の依頼ありがとうございます。
m.ts10806
m.ts10806

2019/06/27 02:23

「読み込む」というところですが、結局のところどういう結果を想定されていますか? 挿入先はHTMLになるのでJavaScript側でIDを指定して挿入するだけのように思います(つまりRubyは直接関係がない)
ni7035
ni7035

2019/06/27 02:43

JavaScriptの情報をtoppages\.index\.erbに読み込んでマップを表示したいです。 普通にhtml\.indexとmain\.jsだと読み込めます。ただRubyonRailsのtoppages\.index\.erbに読み込むことができません。
m.ts10806
m.ts10806

2019/06/27 02:53

では、そのtoppages\.index\.erbのコードもご提示いただいたほうが良さそうに思います。
ni7035
ni7035

2019/06/27 03:03

間違えました。toppages\.html\.erbです。更新しました。
ni7035
ni7035

2019/06/27 03:04

間違えました。index\.html\.erbです。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Google API

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

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

JavaScript

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