GoogleMapAPIで初期位置の表示

解決済

質問者：eccschool
質問日時：2007/05/23 15:06
回答数：2件

<?php
$DBaddress = "大阪市北区芝田" ;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQ …
type="text/javascript" charset="utf-8"></script>
</head>
<body onload="initAddress()">
<div id="map" style="width:450px; height:400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap2(document.getElementById("map"));
var geocoder = new GClientGeocoder();
function showAddress(address) {
geocoder.getLatLng( address, showTheLatLng );
}
function showTheLatLng (latlng) {
var address = document.getElementById("address").value; // 入力欄のidはaddress
if (!latlng) {
alert("ご指定の住所（" + address + "）はジオコーディングできませんでした。");
}
else {
map.setCenter(latlng, 13);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var marker = new GMarker(latlng);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
//]]>
</script>
</body>
</html>
としてDBから値を受け取って初期の地図を表示したいです。
どのようにしたら良いでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： taketan_mydns_jp
回答日時：2007/05/23 19:22

#1です、ちょっと修正しました。

bodyのonloadでinit() とshowAddress("初期アドレス"); を呼んでいます。また、初期のセンター位置は削除しています。

///////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="?http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=A … type="text/javascript" charset="UTF-8"></script>
</head>
<body onload="load();showAddress('<?=$DBaddress?>')">
<div id="map" style="width:450px; height:400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = null;
var geocoder = null;
// 初期化
// <body onload="load()"> で呼び出されています
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
// GClientGeocoderを初期化
geocoder = new GClientGeocoder();
}
}
// DBからのデータを入れます
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
　//ここでshowAddress()にDBからのデータを入力します
//]]>
</script>
<div id="map" style="width:500px; height:600px"></div>
</body>
</html>
/////////////////////
前のはちゃんと検証していなかったのでうまく動かなかったかもしれません。失礼しました。

- 0
- 件

通報する

この回答へのお礼

有難うございます。
うまくいきました。
Javascriptが苦手で・・・。
試行錯誤で時間を浪費してしまいました。
本当に丁寧に教えていただき感謝しています。

通報する

お礼日時：2007/05/23 22:14

No.1

回答者： taketan_mydns_jp
回答日時：2007/05/23 15:23

先ほどのものです。

混乱していますね。下記ソースで試してみて下さい。

$DBaddress = "DBから取得したアドレス";
$aipKey = "Google Maps APIのキー";
とした場合、
/////////////// test.php /////////////////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=<?= …
type="text/javascript" charset="utf-8"></script>
</head>
<body onload="load()">
<div id="map" style="width:450px; height:400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = null;
var geocoder = null;
// 初期化
// <body onload="load()"> で呼び出されています
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.67431, 139.69082), 13);
// GClientGeocoderを初期化
geocoder = new GClientGeocoder();
}
}
// DBからのデータを入れます
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
　//ここでshowAddress()にDBからのデータを入力します
showAddress('<?=$DBaddress?>');
//]]>
</script>
<div id="map" style="width:500px; height:600px"></div>
</body>
</html>
///////////////////////////////////////
以上、
http://www.geekpage.jp/web/google-maps-api/geoco …
を改変

改変した部分は、フォームの部分を削除し、その代わりにshowAddress()へDBからの住所($DBaccess)を入れた事です。

参考まで。

この回答への補足

ありがとうございます。
こちらの意図としてはブラウザの起動と同時にDBから住所情報を取り出して表示をさせたいです。
このソースだと渋谷の情報が初期表示されてしまします。
// 初期化
// <body onload="load()"> で呼び出されています
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.67431, 139.69082), 13);
// GClientGeocoderを初期化
geocoder = new GClientGeocoder();
}
}
をどのようにしたら良いのか・・・と困っています。
よろしくお願いいたします

補足日時：2007/05/23 17:47

通報する