複数マーカー+ウィンドウの表示について

269 views
Skip to first unread message

map help

unread,
Dec 6, 2007, 4:12:30 AM12/6/07
to Google-Maps-API-Japan
はじめまして。最近GoogleMapを始めた者です。

今、複数マーカー+ウィンドウの表示で困っているのですが教えてもらえないでしょうか?
マップは表示されるのですがアイコンが表示されません。
このソースです


//<![CDATA[

//ここからマップ//
var map;
var markers = new Array(3);

function load () {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl()); //マップスク
ロールボタン//
map.setCenter(new GLatLng(34.986049,135.758443), 17);

map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setMapType(G_NORMAL_MAP);

var marker =
null; //マーカー1
 //
var n_markers = 0;
var markeropts = new Object();
marker = new GMarker(new
GPoint(135.75942993164062,34.98601399214843), markeropts);
marker.jmplnk = "http://www.jr-odekake.net/eki/top.php?
id=0610116";
marker.jmplnk_openwin = true;
markers[n_markers] = marker;
GEvent.addListener(marker[0], "click", function()
{ //イベント 吹き出し//
var text='<table ><tr><td width="170" height="100"
valign="top">'

//
M1 ウィンドウ内写真、動画//
text +='<a href="http://www.jr-odekake.net/eki/top.php?id=0610116"
target=_blank">&#20140;&#37117;&#39365;</a> <br><a

href="1.jpg" target="_blank">fhoto</a> <a href="1M.AVI"
target="_blank">move</a> <br> </a><td></tr></table>';

marker.openInfoWindowHtml(text)
});
n_markers++;
map.addOverlay(marker);



//
マーカー2 //
var markeropts = newObject();
marker = new GMarker(new
GPoint(135.75956135988235,34.98738303097112), markeropts);
markers[n_markers] = marker;
GEvent.addListener(marker[1], "click", function()
{ //イベント 吹き出し//
var text='<table ><tr><td width="170" height="100"
valign="top">'

//
M2 ウィンドウ内写真、動画//
text +='<a href="http://www.starbucks.co.jp/"

target=_blank">&#12473;&#12479;&#12540;&#12496;&#12483;&#12463;&#12473;&#12467;&#12540;&#12498;&#12540;&#13;&#10

;</a> <br><a href="STB.GIF" target="_blank">fhoto</a> <a
href="1M.AVI" target="_blank">move</a> <br>

</a><td></tr></table>';

marker.openInfoWindowHtml(text)
});
n_markers++;
map.addOverlay(marker);




//
マーカー3 //
var markeropts = newObject();
marker = new GMarker(new
GPoint(135.7562220096588,34.985890931357545), markeropts);
markers[n_markers] = marker;
//
情報ウィンドウ//
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<div style='width:100px'>"+msg+"</
div>");

//
M3 ウィンドウ内写真、動画//
text +='<a href="http://www.starbucks.co.jp/"

target=_blank">&#12499;&#12483;&#12464;&#12459;&#12513;&#12521;&#20140;&#37117;&#24215;</
a> <br><a href="STB.GIF"

target="_blank">fhoto</a> <a href="1M.AVI" target="_blank">move</a>
<br> </a><td></tr></table>';

marker.openInfoWindowHtml(text)
});
n_markers++;
map.addOverlay(marker);
GEvent.addListner(map,'click',onMapClick);
}
function onMapClick(overlay,point){
if(overlay){
for(ver. i=0; i<3; i++){
if(overlay == markers[i]){
if (markers[i].jmplnk != null) {
if (markers[i].jmplnk_openwin == true) {
window.open(markers[i].jmplnk, "");
} else {
location = markers[i].jmplnk;
}
}
break;
}
}
}
}

//
イベント 経度緯度//
GEvent.addListener(map, 'click',
function(overlay, point) {
if (point) {

document.getElementById("show_x").innerHTML = point.x;

document.getElementById("show_y").innerHTML = point.y;
}
});



//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:700px; height: 500px"></div> <!--マップサイ
ズ-->

<P id="show_x"></P>
<P id="show_y"></P>
<form action = "mailto:universalsu...@yahoo.co.jp"
method="post"enctype="text/plain">
<textarea name="please" rows="5" cols"60"></textarea>
<br>

<input type="submit" value="&#25237;&#31295;&#12377;&#12427;">
</form>

</body>
</html>


hiroaki

unread,
Dec 6, 2007, 6:58:21 AM12/6/07
to Google-Maps-API-Japan
こんばんは。

提示されましたソースはあまり見ていませんが、そのコードで実行した時に、何かエラーはでましたか? それを教えて頂けると調べるほうもアテを付けやす
く、レスもつきやすくなるかもしれませんね。

おそらく、古い書籍などのドキュメントを参考になさったのだと思いますが、 GMarker を new している箇所で用いている GPoint は
もはや緯度経度を表現するのに適していません、かわりに GLatLng を使います。

Google Maps API Reference (GPoint)
http://code.google.com/apis/maps/documentation/reference.html#GPoint

GPoint は緯度・経度ではなく、画像のピクセルです。つまり、もしエラーもなくマーカーが表示されないのであれば、もしかしたらそれは、画面の外
の、とんでもない所に表示されているかもしれません?

map help

unread,
Dec 6, 2007, 8:08:07 AM12/6/07
to Google-Maps-API-Japan
ありがとうございます。
エラーの内容をfirebugで調べてみました。 いくつかみつかりました。

エラー: missing ; after for-loop initializer
ソースファイル:
file:///C:/Documents%20and%20Settings/Owner/%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97/%E5%8D%92%E8%AB%96test/index.html
行: 87, 列: 8
ソースコード:
for(ver i=0; i<3; i++){

エラー: load is not defined
ソースファイル:
file:///C:/Documents%20and%20Settings/Owner/%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97/%E5%8D%92%E8%AB%96test/index.html
行: 1


a has no properties
http://www.google.com/intl/ja_ALL/mapfiles/93/maps2.api/main.js
Line 223

hiroaki

unread,
Dec 6, 2007, 9:49:01 AM12/6/07
to Google-Maps-API-Japan
みつかりましたか。それで、、、それだけなんですか? それを直せばいいですよね? "missing ; ..." と、問題点がハッキリしているの
ですから。

'ver' は 'var' の書き間違いだと思いますから、まずはそれを直して、さいど実行させてみてください。

そうしてすべての JavaScript の構文エラーがなくなったら、そこから Google Maps API の問題かどうか考え始めることが出
来るでしょう。
Message has been deleted
Message has been deleted

Masashi.K

unread,
Dec 6, 2007, 11:43:38 AM12/6/07
to Google-Maps-API-Japan
>map helpさん

えっと、ソースコードを見てみましたよ。
いくつか正しくない部分があったので、勝手に修正してみました。
ちょっと原型とは異なりますが、なるべく原型の形を留めるように作ってありますので、参考にしてみてください。
===========================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-
microsoft-com:vml">
 <head>
  <style type="text/css">
  v\:* {
   behavior:url(#default#VML);
  }
  </style>
  <script src="http://maps.google.com/maps?
file=api&amp;v=2&amp;key=[googlemaps_api]"
      type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[

   //ここからマップ//
   var map;
   var markers = new Array(3);

   function load () {
    map = new GMap2(document.getElementById("map"));

    //マップスクロールボタン//
    map.setCenter(new GLatLng(34.986049,135.758443), 17);
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GOverviewMapControl());
    map.setMapType(G_NORMAL_MAP);
    var n_markers=0;

    //マーカー1//
    var text='<table>'
        +'<tr><td width="170" height="100" valign="top">'
        +'<a target=_blank" href="http://www.jr-odekake.net/eki/
top.php?id=0610116">'
        +'京都駅;'
        +'</a><BR>'
        +'<a href="1.jpg" target="_blank">fhoto</a>  '
        +'<a href="1M.AVI" target="_blank">move</a>  '
        +'<br><td></tr>'
        +'</table>';
    var point = new GLatLng(34.98601399214843, 135.75942993164062);
    var jmplink = "http://www.jr-odekake.net/eki/top.php?id=0610116";
    addmarker(point, n_markers, jmplink, text, "");
    n_markers++;

    //マーカー2//
    text='<table>'
        +'<tr><td width="170" height="100" valign="top">'
        +'<a href="http://www.starbucks.co.jp/" target=_blank">'
        +'スターバックスコーヒ'
        +'</a><BR>'
        +'<a href="STB.GIF" target="_blank">fhoto</a>  '
        +'<a href="1M.AVI" target="_blank">move</a>  '
        +'<br><td></tr>'
        +'</table>';
    point = new GLatLng(34.98738303097112, 135.75956135988235);
    addmarker(point, n_markers, "", text, "");
    n_markers++;

    //マーカー3//
    text='<table>'
        +'<tr><td width="170" height="100" valign="top">'
        +'<a href="http://www.starbucks.co.jp/" target=_blank">'
        +'ビックカメラ京都店'
        +'</a><BR>'
        +'<a href="STB.GIF" target="_blank">fhoto</a>  '
        +'<a href="1M.AVI" target="_blank">move</a>  '
        +'<br><td></tr>'
        +'</table>';
    point = new GLatLng(34.985890931357545, 135.7562220096588);
    addmarker(point, n_markers, "", text, onMapClick);
    n_markers++;

    GEvent.addListener(map, 'click', function(overlay, point) {
      if (point) {
        document.getElementById("show_x").innerHTML = point.x;
        document.getElementById("show_y").innerHTML = point.y;
      }
    });
   }

   function addmarker(latlng, n_markers, jmplink, text, func){
     var marker = new GMarker(latlng);

     if(func=="undefined" || !func){
       GEvent.addListener(marker, "click", function() {
         //イベント 吹き出し//
         marker.openInfoWindowHtml(text)
       });
     }else{
       GEvent.addListener(marker, "click", func);
     }
     marker.jmplnk = jmplink;
     marker.jmplnk_openwin = true;
     markers[n_markers] = marker;
     map.addOverlay(marker);
   }

   function onMapClick(overlay,point){
     if(overlay){
       for(var i=0; i<3; i++){
         if(overlay == markers[i]){
           if (markers[i].jmplnk != null) {
             if (markers[i].jmplnk_openwin == true) {
               window.open(markers[i].jmplnk, "");
             } else {
               location = markers[i].jmplnk;
             }
           }
           break;
         }
      }
    }
  }
 //]]>
  </script>
 </head>
 <body onload="load()" onunload="GUnload()">
   <div id="map" style="width:700px; height: 500px"></div> <!--マップサイズ--
>
     <P id="show_x"></P>
     <P id="show_y"></P>
<form action = "mailto:universalsutadiosja...@yahoo.co.jp"
method="post"enctype="text/plain">
  <textarea name="please" rows="5" cols"60"></textarea>
<br>
  <input type="submit" value="&#25237;&#31295;&#12377;&#12427;">
</form>
 </body>
</html>
=======================================================================

map help

unread,
Dec 6, 2007, 8:26:57 PM12/6/07
to Google-Maps-API-Japan
わざわざありがとうございます。

しかし、そのソースに自分のキーを加えてみるとちょっとエラーが起きてしまいました。  投稿ボタンは表示されるのですが、地図が表示されません。
Firebugのconsoleに書いてあるエラーを書いてみます

unterminated string literal
[Break on this error]         +'<a target=_blank" href="http://www.jr-
odekake.net/eki/\n


これと

load is not defined
onload(load )

この2つが出てきました。

あと、エラーコンソールが別ウィンドウで出てきましたが、それも記述したほうがわかりやすいでしょうか?

map help

unread,
Dec 6, 2007, 8:32:42 PM12/6/07
to Google-Maps-API-Japan
直してみました。
ですが、まだエラーが見つかりました。

newObject is not defined
file:///C:/Documents%20and%20Settings/Owner/%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97/%E5%8D%92%E8%AB%96test/index.html
Line 51
地図はちゃんと表示されています。マーカーだけがまだ表示されません
よろしくお願いします

Masashi.K

unread,
Dec 6, 2007, 8:58:04 PM12/6/07
to Google-Maps-API-Japan
>map helpさん


えっと、では次のようにして確認してみてください。
---------------------------------------------------------------------
手順1:私が掲載したコードをテキストエディタに
     コピー&ペーストして下さい。

手順2:次に自動的に改行されてしまった行を修正します。
     具体的には
     「<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas‐
microsoft-com:vml"> 」を1行にしてください。
     「'<a target=_blank" href="http://www.jr-odekake.net/eki/top.php?
id=0610116">'」を1行にしてください。
     「script src="http://maps.google.com/maps?
file=api&v=2&key=[googlemaps_api]" type="text/javascript"></script> 」を1
行にしてください

手順3:[googlemaps_api]を置き換えてください。

手順4:文字コードを「UTF-8」にして保存してください。
--------------------------------------------------------------
これで出来ると思います。

ちなみにmap helpさんは、Google Mapsの前にJavaScriptってどのくらい使われたことがありますか?
もしよろしければ教えていただければ幸いです。

map help

unread,
Dec 7, 2007, 4:21:07 AM12/7/07
to Google-Maps-API-Japan
解決しました!
hiroakiさんMasashi.Kさんほんとうにありがとうございました

----Masashi.Kさん

Javaは今回まで使ったことはありません
HTMLは少しさわったことがある程度です。
Message has been deleted

Masashi.K

unread,
Dec 7, 2007, 4:31:57 AM12/7/07
to Google-Maps-API-Japan

>map helpさん


よかったですね。解決されて何よりです。

コーディングを読んでいたら、なんとなくそんな感じがしたので
失礼かとは思いましたがお聞きさせていただきました。

「うまく動かない・・・」などありましたら、またどうぞ。
(きっと誰かが答えてくれます 笑)

手前味噌ですが、サイトを運営しているので
もし良かったら参考にしていただければ幸いです。

google maps 活用講座
http://googlemaps.googlermania.com/

Reply all
Reply to author
Forward
0 new messages