初めての投稿でございます。プログラミング初心者です。
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/25 06:43
2016/05/25 07:23 編集
2016/05/25 07:24 編集
2016/05/25 07:32