直接緯度経度を渡してもマーカーが表示されない

moforin

unread,

Jan 10, 2008, 12:45:51 PM1/10/08

to Google-Maps-API-Japan

こんばんわ
moforinです。

以下のコードで複数マーカーを表示させようとしてもmapは表示されるのですが
マーカーが一つも表示されません・・・
緯度経度は他サイトで入力して調べても表示されるのですが、以下のコードだと表示されなくなります。
何かおかしなところがあればご指摘ください。

緯度経度はデータベースからformに受け渡して取得しています。

【ソース】
var gMap;
var marker;

function load() {

//////////////////////////
// googlemap作成_start
//
//Google Maps APIオブジェクト作成＆初期化
var gMap = new GMap2(document.getElementById("map"));
gMap.addControl(new GMapTypeControl());
gMap.addControl(new GLargeMapControl());
gMap.clearOverlays();
//ジオコーディングするためのオブジェクト作成
gGeo = new GClientGeocoder();

//中心座標をきめる
if (document.getElementById("t").value == "北海道") {
gGeo.getLatLng(document.getElementById("t").value,addCenter7);
}
else if (document.getElementById("t").value == "香川県") {
gGeo.getLatLng(document.getElementById("t").value,addCenter9);
}
else if (document.getElementById("t").value == "大阪府") {

gGeo.getLatLng(document.getElementById("t").value,addCenter10);
}
else if (document.getElementById("t").value == "東京都") {

gGeo.getLatLng(document.getElementById("t").value,addCenter10);
}
else if (document.getElementById("t").value == "沖縄県") {
gGeo.getLatLng(document.getElementById("t").value,addCenter9);
}
else if (document.getElementById("t").value == "神奈川県") {
gGeo.getLatLng(document.getElementById("t").value,addCenter9);
}
else if (document.getElementById("t").value == "佐賀県") {
gGeo.getLatLng(document.getElementById("t").value,addCenter9);
}
else {
gGeo.getLatLng(document.getElementById("t").value,addCenter8);
}

　　//縮尺
function addCenter1(point){
gMap.setCenter(point, 1);
}
function addCenter2(point){
gMap.setCenter(point, 2);
}
function addCenter3(point){
gMap.setCenter(point, 3);
}
function addCenter4(point){
gMap.setCenter(point, 4);
}
function addCenter5(point){
gMap.setCenter(point, 5);
}
function addCenter6(point){
gMap.setCenter(point, 6);
}
function addCenter7(point){
gMap.setCenter(point, 7);
}
function addCenter8(point){
gMap.setCenter(point, 8);
}
function addCenter9(point){
gMap.setCenter(point, 9);
}
function addCenter10(point){
gMap.setCenter(point, 10);
}
function addCenter11(point){
gMap.setCenter(point, 11);
}
function addCenter12(point){
gMap.setCenter(point, 12);
}
function addCenter13(point){
gMap.setCenter(point, 13);
}
function addCenter14(point){
gMap.setCenter(point, 14);
}
function addCenter15(point){
gMap.setCenter(point,15);
}
function addCenter16(point){
gMap.setCenter(point, 16);
}
function addCenter17(point){
gMap.setCenter(point, 17);
}

//
// googlemap作成end
//////////////////////////

//////////////////////////
// marker作成_start
//

var max=document.getElementById("s").value;
for(i = 1; i <= max; i++){
//マーカを作成
var address=document.getElementById("q"+i).value;
var name=document.getElementById("r"+i).value;
var tel=document.getElementById("u"+i).value;

var lat=document.getElementById("y"+i).value;
var lng=document.getElementById("z"+i).value;

addMarker(lat,lng,address,name,tel);

}

function addMarker(lat,lng,address,name,tel){
var point = new GLatLng(lat,lng);
function (point){
if (point) {
//マーカーを作成
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
var txt="<div id='Gfont' align='left'>"
+" <b>名前：</b>" + name + "<br />"
+ "<b>住所：</b>" + address + "<br />"
+ "<b>電話：</b>" + tel + "</div>";
marker.openInfoWindowHtml(txt);
});
//マーカーを地図上に配置
gMap.addOverlay(marker);
}
}
}

//
// marker作成_end
//////////////////////////
}

Masashi.K

unread,

Jan 10, 2008, 8:47:01 PM1/10/08

to Google-Maps-API-Japan

>moforinさん

こんにちは。Masashi.Kです。
検証しようかと思うのですが、コードだけでなくHTMLの部分も書いていただけませんか？
「document.getElementById("t")」のあたりが、何を参照しているのかコードだけでは分かりませでした。
お手数ですが、宜しくお願いいたします。

moforin

unread,

Jan 10, 2008, 9:31:29 PM1/10/08

to Google-Maps-API-Japan

迅速なお返事大変ありがとうございます。
moforinです。

Masashi.Kさん毎度大変お世話になっております。
document.getElementById("t")の値なのですが都道府県名を取ってきております。

各値はmysqlから取得しており、以下のようにsmartyでデータを複数取得しております。

どうぞよろしくお願いいたします。

【ソース】

{foreach from=$app.data key=key item="row"
name="name"}
<tr>
<td class="txt14under" width="250"><a
href="{$config.url}index.php?
action_detail_index=true&member_id={$row.member_id}">{$row.office_open_name}</
a></td>


<input type="hidden"
id="q{$smarty.foreach.name.iteration}" value="{$row.office_prefecture}
{$row.office_city}{$row.office_address}" />


<input type="hidden"
id="r{$smarty.foreach.name.iteration}"
value="{$row.office_open_name}" />


<input type="hidden"
id="u{$smarty.foreach.name.iteration}" value="{$row.office_tel}" />


<input type="hidden"
id="y{$smarty.foreach.name.iteration}" value="{$row.lat}" />


<input type="hidden"
id="z{$smarty.foreach.name.iteration}" value="{$row.lng}" />


{if $smarty.foreach.name.last}

<input type="hidden" id="s"
value="{$smarty.foreach.name.total}" />


<input type="hidden" id="t"
value="{$row.office_prefecture}" />
{/if}
<td class="txt12under">
<table width="100%" border="0"
cellspacing="0" cellpadding="2" bgcolor="#cccccc">
<tr>
<td
bgcolor="white">{$row.office_prefecture}{$row.office_city}
{$row.office_address}<br>
{$row.office_tel}<br>
</td>
</tr>
</table>
</td>
{/foreach}

【ソースここまで】

お忙しいところ申し訳ありませんが以上よろしくお願いいたします。

Masashi.K

unread,

Jan 11, 2008, 7:50:09 PM1/11/08

to Google-Maps-API-Japan

> moforinです。

smartyのコードだと、実際のデータが含まれておらず、
またsmartyを知らない方には検証ができないので
お手数をおかけしますが、smartyを変換した後のHTML
つまり、<body>～</body>を貼り付けていただけませんか？

よろしくおねがいします。

moforin

unread,

Jan 12, 2008, 4:10:08 AM1/12/08

to Google-Maps-API-Japan

moforinです。

Masashi.Kさんすみません。
すっかり勘違いしておりました･･･

早速ですが以下がHTMLです。

【ソース】

<table width="729" border="0" cellspacing="0"
cellpadding="2">

<tr>
<td class="txt14under" colspan="2"
bgcolor="#f1e5d3">　青森県の一覧</td>
</tr>

<tr>
<td class="txt14under" width="250"><a

href="http:#.html">名前1</a></td>
<input type="hidden" id="q1" value="住所1" />
<input type="hidden" id="r1" value="名前1" />
<input type="hidden" id="u1" value="電話1" />
<input type="hidden" id="y1"
value="40.825564" />
<input type="hidden" id="z1"
value="140.735638" />

<tr>
<td class="txt14under" width="250"><a

href="http:#.html">名前2</a></td>
<input type="hidden" id="q1" value="住所2" />
<input type="hidden" id="r1" value="名前2" />
<input type="hidden" id="u1" value="電話2" />
<input type="hidden" id="y2"
value="40.600264" />
<input type="hidden" id="z2"
value="140.478447" />

<tr>
<td class="txt14under" width="250"><a

href="http:#.html">名前3</a></td>
<input type="hidden" id="q1" value="住所3" />
<input type="hidden" id="r1" value="名前3" />
<input type="hidden" id="u1" value="電話3" />
<input type="hidden" id="y3"
value="40.624114" />
<input type="hidden" id="z3"
value="141.233926" />

<tr>
<td class="txt14under" width="250"><a

href="http:#.html">名前4</a></td>
<input type="hidden" id="q1" value="住所4" />
<input type="hidden" id="r1" value="名前4" />
<input type="hidden" id="u1" value="電話4" />
<input type="hidden" id="y4"
value="40.505726" />
<input type="hidden" id="z4"
value="141.484255" />
<input type="hidden" id="s" value="4" />
<input type="hidden" id="t" value="青森県" />

<td bgcolor="white">住所4<br>
電話4<br>
</td>

<td align="right" bgcolor="white">

<a href="http:#.html"><img
src="images/NEXT_BT2_01.gif" alt="" width="125" height="19"
border="0"></a>
</td>
</tr>
</table>

</td>
</tr>
</table>

【ソースここまで】

リンク先、住所などは一応個人情報なので伏せておきますね。

つたないところが沢山ありますが、以上よろしくお願いいたします。

moforin

unread,

Jan 15, 2008, 4:23:21 AM1/15/08

to Google-Maps-API-Japan

こんばんわ
moforinです。

firebugでみたら

a.U() has no properties
la(Object Y=Object d=div#map xa=[3] Db=(417, 431) im=div f=div,
undefined)main.js (1513 行目)
load()google_form.js (109 行目)
onload(load )index.php (1 行目)
[Break on this error] function la(a,b){var
c=this;c.c=a;c.ui=a.K();c.zg=a.U().getProjection();b=b||{};...

以上のようなエラー？がでていました。
ググッてもひっかりもせず・・・

それとヘッダ部分とかも載せたほうがよかったでしょうか･･･？
関係ないと思い載せなかったのですが、必要であればすぐにアップします。

よろしくお願いいたします。

Masashi.K

unread,

Jan 15, 2008, 8:47:58 AM1/15/08

to Google-Maps-API-Japan

>moforinさん

今日、コードをデバッグしてみたのですが、コードのいくつかに致命的なミスを犯していますよ。
まだ完全にデバッグできたわけではないのですが、先に分かっているものだけ列挙しますね。

ミス１．変数gMapの宣言がおかしいです。グローバル変数とローカル変数が混ざっています。
ミス２．　function addMarker{}内でfunctionを宣言していますが、ここは動作していません。
ミス３．　(これは多分コピーミスだと思いますが) function load()が「}」で閉じていません。

とりあえず、簡単にデバッグしてみて気づいたのはその点ですかね。
ミス３はともかく、ミス１とミス２を直してみて気づいたのですが、その辺りにエラーがあるというところまでは見当がつきました。
明日にまた仕事の休み時間にでもデバッグしてみます。

ミス１とミス２については、答えを出すとmoforinさんのためにならないので、指摘のポイントを調べてみて見つけてみてくださいね。

ではでは。

moforin

unread,

Jan 15, 2008, 9:32:39 AM1/15/08

to Google-Maps-API-Japan

>Masashi.Kさん

moforinです。
毎回丁寧にありがとうございます。

１，２の点を早速いじってみます！

引き続きよろしくお願いいたします。

moforin

unread,

Jan 15, 2008, 11:51:53 PM1/15/08

to Google-Maps-API-Japan

moforinです。

早速余計なローカル変数を消してみました。
そしてfunctinを１つにまとめてみましたがエラーが変わらずでした・・・。

以下のソースまだおかしいでしょうか・・・？

【ソース】
var gMap;
var gGeo;

function load() {

//////////////////////////
// googlemap作成_start
//
//Google Maps APIオブジェクト作成＆初期化

gMap = new GMap2(document.getElementById("map"));
gMap.addControl(new GMapTypeControl());
gMap.addControl(new GLargeMapControl());
gMap.clearOverlays();
//ジオコーディングするためのオブジェクト作成
gGeo = new GClientGeocoder();

//中心座標と倍率をきめる

if (document.getElementById("t").value == "北海道") {
gGeo.getLatLng(document.getElementById("t").value,addCenter7);
}
else if (document.getElementById("t").value == "香川県") {
gGeo.getLatLng(document.getElementById("t").value,addCenter9);
}
else if (document.getElementById("t").value == "大阪府") {

gGeo.getLatLng(document.getElementById("t").value,addCenter10);
}
else if (document.getElementById("t").value == "東京都") {

gGeo.getLatLng(document.getElementById("t").value,addCenter10);
}
else if (document.getElementById("t").value == "沖縄県") {
gGeo.getLatLng(document.getElementById("t").value,addCenter9);
}
else if (document.getElementById("t").value == "神奈川県") {
gGeo.getLatLng(document.getElementById("t").value,addCenter9);
}
else if (document.getElementById("t").value == "佐賀県") {
gGeo.getLatLng(document.getElementById("t").value,addCenter9);
}
else {
gGeo.getLatLng(document.getElementById("t").value,addCenter8);
}

//倍率

//
// googlemap作成end
//////////////////////////

//////////////////////////
// marker作成_start
//

var max=document.getElementById("s").value;

for(i = 1; i <= max; i++){
//マーカを作成

var office_address=document.getElementById("q"+i).value;
var office_name=document.getElementById("r"+i).value;
var office_tel=document.getElementById("u"+i).value;
var lat=parseFloat(document.getElementById("y"+i).value);
var lng=parseFloat(document.getElementById("z"+i).value);

addMarker(lat,lng,office_address,office_name,office_tel);

}

function addMarker(lat,lng,address,name,tel){

var latlng = new GLatLng(lat,lng);

if (latlng) {
//マーカーを作成
var marker = new GMarker(latlng);

GEvent.addListener(marker, "click", function() {
var txt="<div id='Gfont' align='left'>"

+" <b>院名：</b>" + name + "<br />"

+ "<b>住所：</b>" + address + "<br />"
+ "<b>電話：</b>" + tel + "</div>";
marker.openInfoWindowHtml(txt);
});
//マーカーを地図上に配置
gMap.addOverlay(marker);
}
}

//
// marker作成_end
//////////////////////////
}

【ソースここまで】

moforin

unread,

Jan 17, 2008, 2:40:46 AM1/17/08

to Google-Maps-API-Japan

moforinです。
エラーに変化がありました。

this.F has no properties　になっており
Fがどの関数か特定できませんでした。

firebugで中身を見ると以下のようになってました。
googlemap関数の使い間違えなのでしょうか･･･?

なにかご存知でしたら教えてください。

よろしくお願いいたします。

【エラー】
Wb((40.825564, 140.735638) fn=40.825564 jb=140.735638 x=140.735638
y=40.825564)main.js (667 行目)
m((40.825564, 140.735638) fn=40.825564 jb=140.735638 x=140.735638
y=40.825564, undefined)main.js (664 行目)
m((40.825564, 140.735638) fn=40.825564 jb=140.735638 x=140.735638
y=40.825564, undefined)main.js (613 行目)
Rb()main.js (862 行目)
initialize(Object Q=Object d=div#map Da=[3] Nb=(417, 431) Wm=div
f=div)main.js (859 行目)
nw(Object R=(40.825564, 140.735638) qa=0 va=false p=true
Il=[0])main.js (546 行目)
createMarker(40.825564, 140.735638, "住所", "名前", "電話")google_form.js
(99 行目)
load()google_form.js (79 行目)
onload(load )index.php (1 行目)
[Break on this error] T.prototype.Wb=function(a){return
this.F.getProjection().fromLatLngToPixel(a,thi...
【エラーここまで】

【ソース】
var map;

var gGeo;

function load() {

//////////////////////////
// googlemap作成_start
//
//Google Maps APIオブジェクト作成＆初期化

map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.clearOverlays();

//ジオコーディングするためのオブジェクト作成
gGeo = new GClientGeocoder();

//中心座標と倍率をきめる
if (document.getElementById("t").value == "北海道") {
gGeo.getLatLng(document.getElementById("t").value,addCenter7);
}
else if (document.getElementById("t").value == "香川県") {
gGeo.getLatLng(document.getElementById("t").value,addCenter9);
}
else if (document.getElementById("t").value == "大阪府") {

gGeo.getLatLng(document.getElementById("t").value,addCenter10);
}
else if (document.getElementById("t").value == "東京都") {

gGeo.getLatLng(document.getElementById("t").value,addCenter10);
}
else if (document.getElementById("t").value == "沖縄県") {
gGeo.getLatLng(document.getElementById("t").value,addCenter9);
}
else if (document.getElementById("t").value == "神奈川県") {
gGeo.getLatLng(document.getElementById("t").value,addCenter9);
}
else if (document.getElementById("t").value == "佐賀県") {
gGeo.getLatLng(document.getElementById("t").value,addCenter9);
}
else {
gGeo.getLatLng(document.getElementById("t").value,addCenter8);
}

//倍率
function addCenter7(point){

map.setCenter(point, 7);
}
function addCenter8(point){
map.setCenter(point, 8);
}
function addCenter9(point){
map.setCenter(point, 9);
}
function addCenter10(point){
map.setCenter(point, 10);

}

//
// googlemap作成end
//////////////////////////

//////////////////////////
// marker作成_start
//

var max=document.getElementById("s").value;

for(i = 1; i <= max; i++){
//マーカを作成
var office_address=document.getElementById("q"+i).value;
var office_name=document.getElementById("r"+i).value;
var office_tel=document.getElementById("u"+i).value;
var lat=parseFloat(document.getElementById("y"+i).value);
var lng=parseFloat(document.getElementById("z"+i).value);

createMarker(lat, lng, office_address, office_name,
office_tel);

}

function createMarker(lat, lng, address, name, tel){

//マーカーを作成
var marker = new GMarker(new GLatLng(lat, lng));

GEvent.addListener(marker, "click", function() {
var txt="<div id='Gfont' align='left'>"
+" <b>院名：</b>" + name + "<br />"
+ "<b>住所：</b>" + address + "<br />"
+ "<b>電話：</b>" + tel + "</div>";
marker.openInfoWindowHtml(txt);
});

//マーカーを地図上に配置

map.addOverlay(marker);

moforin

unread,

Jan 17, 2008, 12:08:56 PM1/17/08

to Google-Maps-API-Japan

こんばんわmoforinです。

どうやらmapの中心を決める部分でおかしいということがわかりました。
以下のソースだと何のエラーも出ずにマーカーを出力することができました。

そこで都道府県の大きさ別に倍率を変えたいときはどうすればいいのやら･･･
今までのif文の条件分岐と
getLatLng("都道府県名",function(latlng){
map.setCenter(latlng, 倍率);
}
);
が使えないとなると４７種類のsetCenter()を作らないといけないでしょうか?

都道府県単位でマーカーが入りきるような
よい方法があればご教授お願いいたします。

【エラーのでなかったsetCenter固定のソース】

function load() {

//////////////////////////
// googlemap作成_start
//
//Google Maps APIオブジェクト作成＆初期化

var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());
map.clearOverlays();

//マップの中心部分と倍率
map.setCenter(new GLatLng(35.655926,139.329056), 6);

moforin

unread,

Jan 17, 2008, 11:46:24 PM1/17/08

to Google-Maps-API-Japan

moforinです。

以下のようにmap.setCenter(new GLatLng(35.655926,139.329056), 4);を入れてからやると
エラーがでなく普通に表示されました･･･。

なんだかハックっぽくって嫌な感じなんですが、これが普通なんでしょうか？

【ソース】

function load() {

//////////////////////////
// googlemap作成_start
//
//Google Maps APIオブジェクト作成＆初期化
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());
map.clearOverlays();

//ジオコーディングするためのオブジェクト作成
var gGeo = new GClientGeocoder();

//中心座標と倍率をきめる
map.setCenter(new GLatLng(35.655926,139.329056), 4);//////////////こ
の行を追加////////////////
var district = document.getElementById("t").value;

createCenter(district);

function createCenter(dis){
if (dis == "北海道") {
gGeo.getLatLng(dis, function(latlng){
map.setCenter(latlng, 6);
});
}
else if (dis == "香川県") {
gGeo.getLatLng(dis, function(latlng){
map.setCenter(latlng, 9);
});
}
else if (dis == "大阪府") {
gGeo.getLatLng(dis, function(latlng){
map.setCenter(latlng, 10);
});
}
else if (dis == "東京都") {
gGeo.getLatLng(dis, function(latlng){
map.setCenter(latlng, 10);
});
}
else if (dis == "沖縄県") {
gGeo.getLatLng(dis, function(latlng){
map.setCenter(latlng, 9);
});
}
else if (dis == "神奈川県") {
gGeo.getLatLng(dis, function(latlng){
map.setCenter(latlng, 9);
});
}
else if (dis == "佐賀県") {
gGeo.getLatLng(dis, function(latlng){
map.setCenter(latlng, 9);
});
}
else {
gGeo.getLatLng(dis, function(latlng){
map.setCenter(latlng, 8);

});
}
}

//
// googlemap作成end
//////////////////////////

//////////////////////////
// marker作成_start
//

var max=document.getElementById("s").value;

for(i = 1; i <= max; i++){
//マーカを作成
var office_address=document.getElementById("q"+i).value;
var office_name=document.getElementById("r"+i).value;
var office_tel=document.getElementById("u"+i).value;
var lat=parseFloat(document.getElementById("y"+i).value);
var lng=parseFloat(document.getElementById("z"+i).value);

createMarker(lat, lng, office_address, office_name,
office_tel);

}

function createMarker(lat, lng, address, name, tel){

//マーカーを作成
var marker = new GMarker(new GLatLng(lat, lng));

GEvent.addListener(marker, "click", function() {
var txt="<div id='Gfont' align='left'>"

+" <b>名前：</b>" + name + "<br />"

Masashi.K

unread,

Jan 20, 2008, 4:00:56 AM1/20/08

to Google-Maps-API-Japan

> moforinさん

こんにちは。Masashi.Kです。
しばらく忙しくてチェックできず、すみません。

「senCenter()を入れたら・・・」というのは、そうなのかもしれませんね。
というよりも、(私の場合は)通常はsenCenter()で地図を表示させておいてから
処理を行うので、それがなかった事にも気づいていませんでしたよ(＾＾；>

まぁ無事に解決されたのであれば、それでよいのではないですね。

moforin

unread,

Jan 20, 2008, 10:40:04 AM1/20/08

to Google-Maps-API-Japan

> Masashi.Kさん

毎回毎回お世話になっております。
こんばんわmoforinです。

とりあえず解決？したです。
ありがとうございました。
また何か情報があれば聞いちゃいますのでよろしくお願いいたします。

Reply all

Reply to author

Forward