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

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

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

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Google マップ

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

Q&A

解決済

1回答

2576閲覧

MySQLから住所データを抽出し、googlemapに表示させたい

fukurou

総合スコア14

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Google マップ

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

0グッド

0クリップ

投稿2016/05/25 05:55

初めての投稿でございます。プログラミング初心者です。
node(express利用)のwebサーバを作り、MySQLを利用しています。またHTML側ではejsをインストールしております。

MySQLから住所データを抽出し、抽出したデータを緯度・経度変換した上でgooglemapに表示させるようなWebページを作ろうとしていますがうまくいかず、かれこれ1週間以上悩み続けております。
初心者でございますので、不格好かコードしか書く事できていないかもしれませんが、どうぞお知恵を御借りさせて頂ければと考えております。

###発生している問題・エラーメッセージ
動かしてみると、コンソール上では問題なく住所が表示されますが、
ブラウザ上で以下のアラートが表示され、地図自体が表示されない状態でございます。

住所から緯度経度に変換できません

###該当のソースコード

【test.js】 (ExoressのRoutes内で記述したjsファイル)

var express = require('express'); var router = express.Router(); var passport = require('passport'); var moment = require('moment'); var connection = require('../mysqlConnection');//mysql接続を別ファイルに記載しており、無事接続して使う事ができることは確認できております。 /* GET home page. */ router.get('/', function(req, res, next) { //ログイン時のエラーメッセージ表示 var errorMsg = ''; var error = req.flash().error; if(error){ var errorMsg = error[0];} //以下時間表示 // var query = 'SELECT *, DATE_FORMAT(created_at, \'%Y年%m月%d日 %k時%i分%s秒\') AS created_at FROM users'; var query = 'SELECT address from users'; connection.query(query, function(err, rows) { console.log(rows); //以上時間表示 res.render('test', { title: "example", msg: errorMsg, boardList: rows }); }); }); module.exports = router;

【test.ejs】(Expressのview内に記述したEJSファイル)

index.ejs <link rel='stylesheet' href='/stylesheets/style.css' /> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>googlemap test</title> <script src="http://maps.google.com/maps?hl=en-uk&file=api&v=2&key=【取得したAPIキーを書いています】&sensor=false" type="text/javascript" charset="utf-8"></script> </head> <body onload="initialize()" > <div id="map_canvas" style="width: 600px; height: 400px"></div> </body> <% boardList.forEach(function(boardItem) { %> <p id="board__address"> <%= boardItem.address %></p> <% }); %> <script> function initialize() { map = new google.maps.Map(document.getElementById("map_canvas")); geocoder = new GClientGeocoder(); var address = document.getElementById("board__address").value; geocoder.getLatLng(address, moveTo); function moveTo(latlng){ if (latlng){ map.setCenter(latlng, 15); var marker = new GMarker(latlng); map.addOverlay(marker); }else{ alert("住所から緯度経度に変換できません"); } } } </script>

###試したこと
どこで間違えているのかを知るために、
・MySQLから住所データを抽出してHTMLへ表示
・手打ちした住所データを緯度・経度変換した上でgooglemapに表示
することを試しており、それぞれ無事に動くことを確認致しました。
(しかし、未だに問題の原因が特定できていない状態です...)

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

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

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

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

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

guest

回答1

0

ベストアンサー

下記部分の記述では、idが同じ要素がたくさん現れることになります。HTMLではidはページ内に1つです。そういう場合は <p class="board__address"> とかするのが良いと思います。

HTML

1<% boardList.forEach(function(boardItem) { %> 2<p id="board__address"> <%= boardItem.address %></p> 3<% }); %> 4```また、下記部分は2つ問題があり、1つは複数要素に対応できていないことで、もう1つはエレメントに ``value`` というプロパティはありません。使うなら ``innerHTML`` ですね。 5```JavaScript 6 var address = document.getElementById("board__address").value; 7``` ``document.getElementsByClassName()`` を使ってループして処理を回す感じで実装すればいけると思います。(私ならサーバからJSONでJavaScriptに値を渡すと思います) 8 9【document.getElementsByClassName() - classで要素を取得する】 10[https://syncer.jp/javascript-reference/document-getelementsbyclassname](https://syncer.jp/javascript-reference/document-getelementsbyclassname) 11 12--- 13 14また、Geocodingにはリクエスト制限が有るため、サーバ側で取得してキャッシュしておくのが良いと思います。 15 16 17【Google Maps API v3のアクセス数を調べる方法 - Google Maps 活用講座】 18[http://googlemaps.googlermania.com/google_maps_api_v3/ja/api_key.html](http://googlemaps.googlermania.com/google_maps_api_v3/ja/api_key.html) 19 20【意外に多いGoogle Maps関連機能制限をまとめた。】 21[http://maplesystems.co.jp/blog/programming/20127.html](http://maplesystems.co.jp/blog/programming/20127.html) 22 23【よくある質問 | Google Maps API | Google Developers】 24[https://developers.google.com/maps/faq?hl=ja#usage-limits](https://developers.google.com/maps/faq?hl=ja#usage-limits)

投稿2016/05/25 06:18

kei344

総合スコア69364

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

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

fukurou

2016/05/25 06:43

迅速かつ丁寧にご回答頂き、大変ありがとうございます。 アドバイス頂いたように以下のように修正致しましたが「住所から緯度経度に変換できません」と再度アラート表示されしまいます。(尚、以下②の「.innerHTML」を消して実行するとアラートは表示されませんが地図自体が表示されなくなるようでございます。) ① <p id="board__address">⇒<p class="board__address"> ② document.getElementById("board__address").innerHTML;  ⇒document.getElementsByClassName("board__address"). 何度もすみませんが、もしよろしければアドバイスを頂けると嬉しい限りでございます。
kei344

2016/05/25 07:23 編集

(間違って連投してしまったため削除)
kei344

2016/05/25 07:24 編集

document.getElementsByClassName("board__address")には複数の要素が入るため、 document.getElementsByClassName("board__address").innerHTML(); という書き方はできません。 また、見落としていたのですが使用されているライブラリが古いようです。「api&v=2」というのは Google Maps API Ver.2 を呼び出していると思われます。現在は Ver.3 に移行していますので、そちらをお使いください。(近いうちに使えなくなります) すいません連投してしまったようなので、削除しました。
fukurou

2016/05/25 07:32

>Google Maps API Ver2用です。いまはV3が標準なのでそちらに切り替えたほうが良いと思います。 ⇒ ご指摘ありがとうございます。作成する際に参考にしたサイトがV2だったようです。もう一度勉強し直してV3で修正してみようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問