テーマ：
「Google Maps API(以下、GMA) と PHP + MySQL を連動し、表示領域に応じたデータをデータベースから取得し、地図に表示する」
検索エンジンからこられた方はvol.1よりご覧ください
map.htmlのソース （表示の都合上、一部、全角記号・全角スペースを使用しております。）
<html>
<head> 省略 </head>
<body>
<div id="map" style="width:500px; height:400px"></div><!-- ここに地図を表示 -->
<script src="http://maps.google.com/maps?file=api&v=1&key="****************" type="text/javascript"></script><!-- APIキーを記述 -->
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(139.766103, 35.681391), 4); // 地図中心（東京駅）
// ドラッグで移動終了後にエリアに対応するマーカーを表示
GEvent.addListener(map, "moveend", function() {
map.clearOverlays(); // 表示済のマーカーを消去（※1）
plot_marker(map);
});
// 地図上にマーカーを表示する関数 (引数mapは省略可)
function plot_marker(map){
// 表示領域情報を取得し、クエリーストリングとしてmap.phpに受け渡す準備
var bound = map.getBoundsLatLng(); // 表示領域情報を取得
var url = "map.php?minX="＋bound.minX＋"&minY="+bound.minY＋"&maxX="＋bound.maxX＋"&maxY="＋bound.maxY;
↑表示の都合上、全角＋記号を使っています。
// XMLHttpRequestオブジェクトを生成
var request = GXmlHttp.create();
// GETメソッドでurlを非同期(true)に開く
request.open("GET",url,true);
// コールバック関数（map.phpから返されるXML(※2)を解析）
request.onreadystatechange = function() {
if (request.readyState == 4) {
var res = request.responseXML;
// XMLのmarkerタグ要素の配列markersを作る
var markers = res.documentElement.getElementsByTagName("marker");
// forループで地図上にマーカーを1つずつプロットしていく（※3）
// perseFloat関数は与えられた文字型の引数を実数値に変換する関数
for (var i = 0; i < markers.length; i++) {
var lon = parseFloat(markers[i].getAttribute("longitude"));
var lat = parseFloat(markers[i].getAttribute("latitude"));
var point = new GPoint(lon,lat);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
}
request.send(null); // 送信
}
//]]>
</script>
</body>
</html>
表示領域情報を取得し、クエリーストリングとしてmap.phpに受け渡すことがポイントで、その他はAjax（というかGMA）の典型パターンです。
（※1）
clearOverlays() はIEでは正常に機能しないこともあるので、removeOverlay(overlay) を繰り返してマーカーをひとつずつ消していく方法を用いることが多いようです。
（※2）
map.phpからは次のようなXMLが返されます
<?xml version="1.0" encoding="UTF-8"?>
<markers>
<marker longitude="139.71" latitude="35.5" />
<marker longitude="139.76" latitude="35.6" />
<marker longitude="139.80" latitude="35.7" />
</markers>
（※3）
上のXMLの場合こんな感じになります。
parseFloat(markers[0].getAttribute("longitude")) → 139.71
parseFloat(markers[1].getAttribute("longitude")) → 139.76
parseFloat(markers[2].getAttribute("longitude")) → 139.80
vol.3ではXMLを出力するためのスクリプトmap.phpのソースサンプルを示します。
「Google Maps API(以下、GMA) と PHP + MySQL を連動し、表示領域に応じたデータをデータベースから取得し、地図に表示する」
検索エンジンからこられた方はvol.1よりご覧ください
map.htmlのソース （表示の都合上、一部、全角記号・全角スペースを使用しております。）
<html>
<head> 省略 </head>
<body>
<div id="map" style="width:500px; height:400px"></div><!-- ここに地図を表示 -->
<script src="http://maps.google.com/maps?file=api&v=1&key="****************" type="text/javascript"></script><!-- APIキーを記述 -->
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(139.766103, 35.681391), 4); // 地図中心（東京駅）
// ドラッグで移動終了後にエリアに対応するマーカーを表示
GEvent.addListener(map, "moveend", function() {
map.clearOverlays(); // 表示済のマーカーを消去（※1）
plot_marker(map);
});
// 地図上にマーカーを表示する関数 (引数mapは省略可)
function plot_marker(map){
// 表示領域情報を取得し、クエリーストリングとしてmap.phpに受け渡す準備
var bound = map.getBoundsLatLng(); // 表示領域情報を取得
var url = "map.php?minX="＋bound.minX＋"&minY="+bound.minY＋"&maxX="＋bound.maxX＋"&maxY="＋bound.maxY;
↑表示の都合上、全角＋記号を使っています。
// XMLHttpRequestオブジェクトを生成
var request = GXmlHttp.create();
// GETメソッドでurlを非同期(true)に開く
request.open("GET",url,true);
// コールバック関数（map.phpから返されるXML(※2)を解析）
request.onreadystatechange = function() {
if (request.readyState == 4) {
var res = request.responseXML;
// XMLのmarkerタグ要素の配列markersを作る
var markers = res.documentElement.getElementsByTagName("marker");
// forループで地図上にマーカーを1つずつプロットしていく（※3）
// perseFloat関数は与えられた文字型の引数を実数値に変換する関数
for (var i = 0; i < markers.length; i++) {
var lon = parseFloat(markers[i].getAttribute("longitude"));
var lat = parseFloat(markers[i].getAttribute("latitude"));
var point = new GPoint(lon,lat);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
}
request.send(null); // 送信
}
//]]>
</script>
</body>
</html>
表示領域情報を取得し、クエリーストリングとしてmap.phpに受け渡すことがポイントで、その他はAjax（というかGMA）の典型パターンです。
（※1）
clearOverlays() はIEでは正常に機能しないこともあるので、removeOverlay(overlay) を繰り返してマーカーをひとつずつ消していく方法を用いることが多いようです。
（※2）
map.phpからは次のようなXMLが返されます
<?xml version="1.0" encoding="UTF-8"?>
<markers>
<marker longitude="139.71" latitude="35.5" />
<marker longitude="139.76" latitude="35.6" />
<marker longitude="139.80" latitude="35.7" />
</markers>
（※3）
上のXMLの場合こんな感じになります。
parseFloat(markers[0].getAttribute("longitude")) → 139.71
parseFloat(markers[1].getAttribute("longitude")) → 139.76
parseFloat(markers[2].getAttribute("longitude")) → 139.80
vol.3ではXMLを出力するためのスクリプトmap.phpのソースサンプルを示します。
| HOME |