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

初めての投稿でございます。プログラミング初心者です。
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に表示
することを試しており、それぞれ無事に動くことを確認致しました。
（しかし、未だに問題の原因が特定できていない状態です...）

行動規範の内容に同意します

回答1件

ベストアンサー

下記部分の記述では、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

総合スコア69625

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で修正してみようと思います。

行動規範の内容に同意します