google-map - OpenSource協議会

住所・マップ表示するプログラムの仕様
Google社が提供しているAPI（Google Maps、Google Chart Tools）を利用
し、DB2から取得した情報と組み合わせ地図・グラフの表示を簡易に行い
ます。
１．画面イメージ
＜仕様概要＞
①会社コードを入力する。
②更新ボタン押下で③のグーグルマップ表示
※会社コードをキーにDB（DB2）より住所を取得
しグーグルマップのAPIを利用
③グーグルマップを表示
④データベースから売上のグラフ表示
※DBより売上情報を取得しGoogle Chart Tools
のAPIを利用
住所・マップ表示するプログラムの仕様
２．システム概念図
config基ini
config基ini
config基ini
config基ini
[[
込00得
込00得 == "JB社社000幹"
"JB社社000幹"
]]
[[
込00想
込00想 == "要AST素R0容"
"要AST素R0容"
]]
要ySQ表
要ySQ表
社reate
社reate Table
Table
中社reate
中社reate 社ollection
社ollection
作作
＜テーブル定義＞
JB社社000幹大
JB社社000幹大
要AST素R0容
要AST素R0容
込自込
込自込
java
java script
script
ﾌｨｰﾙﾄﾞ
A0001
A0002
A0003
A0004
A0005
A0006
A0007
A0008
A0009
名前
表示順序
会社コード
取引先名
郵便番号
住所全部
都道府県
市町村
建物名
売上額
ﾀｲﾌﾟ
NUMERIC
CHAR
CHAR
CHAR
CHAR
CHAR
CHAR
CHAR
NUMERIC
長さ
KEY
2
8 Primary Key
52
8
258
32
32
32
13
社RT込組
社RT込組
込自込
込自込
java
java script
script
住所表示で使用しているのはテーブル定義の赤字項目のみ
参考： google map表示
http://blog.grush.jp/?p=242
JB社社000得大
JB社社000得大
要AST素R0容
要AST素R0容
＜テーブル定義＞
ﾌｨｰﾙﾄﾞ
A0001
A0002
A0003
A0004
A0005
A0006
A0007
A0008
A0009
名前
ﾀｲﾌﾟ長さ
表示順序
S
2
会社コード A
8
取引先名
O
52
郵便番号
A
8
住所全部
O
258
都道府県
O
32
市町村
O
32
建物名
O
32
売上額
P
13
KEY
Unique Key
本日の発表内容
2.APIの説明
使用したAPI
地図表示
: Google Maps API
»参考ＵＲＬ： http://blog.grush.jp/?p=242
グラフ表示 : Google Chart Tools
»参考ＵＲＬ: http://weble.org/2011/09/12/google-chart-tools
DEMO
»URL(OSS協議会にお問い合わせ下さい)
本日の発表内容
2.APIの説明
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
1
//google mapで住所検索
var name = "<?= $name ?>";
var add = "<?= $add ?>";
var title = name;
var address = add;
var mapdiv = document.getElementById("map_canvas");
var myOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map(mapdiv, myOptions);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
} else {
document.getElementById("map_canvas").innerHTML
= "Google Maps:住所から位置を特定できませんでした。";
}
});
会社マスター(DB2)より取得
・会社名
・住所
※地図タイプ
ROADMAP ：通常の地図
SATELLITE ：航空写真
TERRAIN ：地形
HYBRID
：航空写真に地名
などを重ねて表示
2
・縮尺
・地図タイプ（※）
・スケール表示の有無
3
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: map,
title: title
});
});
</script>
Google Maps APIに
リクエスト送信
本日の発表内容
2.APIの説明
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart1);
function drawChart1() {
var data = new google.visualization.DataTable();
data.addColumn('string', '取引先');
data.addColumn('number', '売上金額');
data.addRows(5);
data.setValue(0, 0, "<?= $urname1 ?>");
data.setValue(0, 1, <?= $urkin1 ?>);
data.setValue(1, 0, "<?= $urname2 ?>");
data.setValue(1, 1, <?= $urkin2 ?>);
data.setValue(2, 0, "<?= $urname3 ?>");
data.setValue(2, 1, <?= $urkin3 ?>);
data.setValue(3, 0, "<?= $urname4 ?>");
data.setValue(3, 1, <?= $urkin4 ?>);
data.setValue(4, 0, "<?= $urname5 ?>");
data.setValue(4, 1, <?= $urkin5 ?>);
var chart = new google.visualization.PieChart(document.getElementById('chart1'));
chart.draw(data, {width: 500, height: 300, title: '取引先別売上金額'});
}
</script>
1
中DB幹作
3
Google Chart API
にリクエスト送信
2
本日の発表内容
所感
・文字コードの変換
半角カナ文字が格納されているIBM iデータベースからデータを取得して
ブラウザに表示するためにテーブルはCCSID:5026、アクセスするユーザーの
CCSID:5035に設定する。
・開発ツールの使用
今回はPHPプログラムの作成にテキストエディタを使用したが、
本格的に開発するためにはeclipseにZend Studioを導入するなど
開発環境を整える必要がある。
・作成時間
WEBで情報収集できるので割と短時間で完成させることができた。

Download Report