Googleマップのウィンドウの表示

このQ&Aのポイント
  • Googleマップの情報ウィンドウの表示方法について説明しています。
  • ウィンドウが開く方法はクリックのみであり、ワンクッションなく表示させる方法についても解説しています。
  • 関連のソースコードも含まれています。
回答を見る
  • ベストアンサー

Googleマップのウィンドウの表示

Googleマップの情報ウィンドウの件ですが、ページが開いた瞬間ウィンドウが開いた状態にしたいのですが、 クリックしてウィンドウを開く方法しかわかりませんでした。 ワンクッション置かずにウィンドウを表示させる方法はありませんでしょうか? 以下が関連のソースになります。 上手くカスタマイズできませんでしょうか。(座標はダミーです) よろしくお願いいたします。 //指定されたpoint(緯度経度)、icon、htmlをもったGMarkerを作って返す関数 function createMarker(point, icon, html) { var marker = new GMarker(point, icon); //クリックしたら吹き出し表示 GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //アイコンを追加 map.addOverlay(createMarker(new GLatLng(105.612038, 27.409698), icon, "<nobr><b>aaa<br>aaa</b><br>aaa<br>aaa</nobr>"));} }

質問者が選んだベストアンサー

  • ベストアンサー
  • ririli
  • ベストアンサー率32% (15/46)
回答No.2

あ、ホントだ、エラーになっちゃいますねぇ、、、 確認もせず投稿してすいません 一応、こんな感じに関数を入れ子構造にすればそのまま窓を開くことができました。 ---------------------------------------------------------- //アイコンを追加 function createMarker(point,icon) { marker = new GMarker(point,icon); return marker; } //アイコンを追加する関数を呼び、ウィンドウを開く function tatoeba(point,icon,html){ map.addOverlay(createMarker(point,icon)); marker.openInfoWindowHtml(html); } var icon; //指定されたpoint(緯度経度)、icon、htmlをもったGMarkerを作って返す関数 tatoeba(new GLatLng(35.658,139.745),icon, "<nobr><b>aaa<br>aaa</b><br>aaa<br>aaa</nobr>"); -------------------------------------------------------- 質問者さんがしようとしてることに沿ってるかどうか不安ですが(特にアイコンのあたり)、 参考になれば幸いです

hiyokohiyo
質問者

お礼

お返事が遅くなってすみません。 おかげさまで無事になりましたありがとうございました。iconの所はマーカーの画像を好きな物に変えることができるみたいです。 functionでもう一度htmlを呼び出さないといけないんですね…勉強になりました。

その他の回答 (1)

  • ririli
  • ベストアンサー率32% (15/46)
回答No.1

GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); の部分を単に marker.openInfoWindowHtml(html); と変更すればよいのでは? 質問の意味を取り違えていたら申し訳ありませんが。

hiyokohiyo
質問者

お礼

ご質問のご回答ありがとうございます。私もclick部分があやしいと思って試してみたのですが…こんな感じでやってみました。 //指定されたpoint(緯度経度)、icon、htmlをもったGMarkerを作って返す関数 function createMarker(point, icon, html) { var marker = new GMarker(point, icon); marker.openInfoWindowHtml(html); return marker; } 何故かエラー表示になってしまいます。(マーカーがひかれない)googleマップの関数?はデリケートです…。

関連するQ&A

  • google mapで二番目以降のマップが表示されない

    自作のマーカーを使い、マーカーをクリックすると吹き出しが出るようにして、マップ上2か所にマーカーを付けたのですが、2番目のマーカーが全く反映されません。 下に書いたものがそのコードなのですが、見直してもどこにミスがあるのかわかりません… どなたか解決策をお願いします… <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(135.384521484375,34.73709847578162), 8 ); var icon = new GIcon(); icon.image = " pngイメージ画像 "; icon.shadow = " pngイメージ画像 "; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); // 1番目位置 var point = new GPoint(省略); var marker = new GMarker(point,icon); map.addOverlay(marker); // 1番目吹き出し GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style='width:350px;font-size:12px;' ><table><tr><td><img src=イメージ画像 ><br><a href=\"ページへのリンク\"target=\"blank\" >説明文<br><br></td></tr></table></div>");}); var marker = createMarker(point,html); map.addOverlay(marker); // 2番目位置 var point = new GPoint(省略); var marker = new GMarker(point,icon); map.addOverlay(marker); // 2番目吹き出し GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style='width:350px;font-size:12px;' ><table><tr><td><img src=イメージ画像 ><br><a href=\"ページへのリンク\"target=\"blank\" >説明文<br><br></td></tr></table></div>");}); var marker = createMarker(point,html); map.addOverlay(marker); //]]> </script>

  • google map

    こんにちは。最近「google map」を使いはじめまして、 いろいろと地図を作って試しているのですが、わからない ことがありまして。。お願い致します。 google mapの「サイドバー」と「吹き出しのタブ」の 両方を同時に表示させたいのですが、どのようにすれば よろしいのでしょうか。 「サイドバー」と「吹き出しタブ」を別々に表示させること はできたのですが、どうしても両方を同時に表示させること ができません。 サイドバーは以下のような感じで作っています。 function createMarker(point, name, html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); gmarkers[i] = marker; htmls[i] = html; sidebar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br />'; i++; return marker; } function myclick(i) { gmarkers[i].openInfoWindowHtml(htmls[i]); } 吹き出しタブは以下のような感じで作りました。 function createTabbedMarker(point,html1,html2,label1,label2,n) { var marker = new GMarker(point,icon[n]); GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]); }); return marker; } どうぞ、よろしくお願い致します。

  • Google Maps:同マップ内でそれぞれのアイコンの表示・非表示を切り替えるには

    いつもお世話になっております。 Google Mapsを利用し、同マップ内でそれぞれのアイコンの表示・非表示を切り替えたいという要望を受けたのですが、やりかたがわからず途方に暮れています。 - 要望 ------------------------------------------- 1.Google Maps内にカテゴリ1~6に属する、デザインがちがうアイコンをそれぞれ3つずつ表示。 2.このアイコンを、カテゴリ群ごとにボタンか何かで表示・非表示を切り替える。 -------------------------------------------------- [1]に関してはできたのですが、[2]のやり方がわかりませんでした。 代替案として、カテゴリごとにGoogle Mapsを読み込むhtmlを変えて iframe内で表示するというのを出したのですが、 “同マップ上でアイコンだけ表示したり消したり”したいとの ことでした。 [1]を実現するのに使用したコードが下記になります。 (※マーカーの関するスクリプトだけ外部ファイル化し、bodyにonloadでcreateMapを読み込んでいます) ----------------------------------------------------- function createMap() { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GOverviewMapControl()); map.setCenter(new GLatLng(緯度, 経度), 13); var icon = new GIcon(); icon.image = "marker.png"; icon.shadow = "shadow.png"; icon.iconSize = new GSize(20, 34); icon.iconAnchor = new GPoint(10, 34); icon.infoWindowAnchor = new GPoint(7, 1); var icon2 = new GIcon(); icon2.image = "marker2.png"; icon2.shadow = "shadow.png"; icon2.iconSize = new GSize(20, 34); icon2.iconAnchor = new GPoint(10, 34); icon2.infoWindowAnchor = new GPoint(7, 1); var point001 = new GLatLng(緯度, 経度); var marker001 = new GMarker(point001, icon); map.addOverlay(marker001); GEvent.addListener(marker001, 'click', function() { marker001.openInfoWindowHtml('<div style="width: 300px">吹き出し<\/div>'); }); var point002 = new GLatLng(緯度, 経度); var marker002 = new GMarker(point002, icon2); map.addOverlay(marker002); GEvent.addListener(marker002, 'click', function() { marker002.openInfoWindowHtml('<div style="width: 300px">吹き出し<\/div>'); }); } ---------------------------------------------- ここまで 方法について、ご存じの方がいらっしゃったら 教えていただきたいです。 よろしくお願いいたします!

  • グーグルマップについて教えてください。

    【やりたいこと】 グーグルマップとストリートビューを連動するところまではできました。しかし、地図をクリックして取得されるデータをマーカーが出るように設定し所までは良かったのですが、そのマーカーをクリックしても必要なデータが表示されません。どの様にしたらいいでしょうか? ソースは下記の通りです。 var map; var myPano; var panoClient; var currentLatLng = new GLatLng(35.6829, 139.7653); window.onload = function() { load(); loadd(); setEvent(); } function load() { map = new GMap2(document.getElementById("mymap"),{draggableCursor:"crosshair"}); map.setCenter(new GLatLng(35.6829, 139.7653), 8);    map.addControl(new GMapTypeControl());    map.addControl(new GLargeMapControl3D());    streetview = new GStreetviewOverlay();    map.addOverlay(streetview); map.addControl(new GOverviewMapControl(new GSize(200,200))); } function loadd() {     myPano = new GStreetviewPanorama(document.getElementById("pano")); GEvent.addListener(map,"click", function(overlay,point) { currentLatLng=point; myPano.setLocationAndPOV(currentLatLng); map.setCenter(currentLatLng); }); } function createGMarker(title, html, lat, lng) { var infoObj = new Object(); infoObj.title = title; var gpObj = new GLatLng(lat, lng); var marker = new GMarker(gpObj, infoObj); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); }

  • Googlemap apiでFFとNNでマーカーの表示が出ないのですが、どこが間違っていますか?

    Googlemap でマーカーの吹き出しに指定のHtmlを表示するように書いたつもりなのですが、IEとオペラでは意図どうりに表示されるのですがFFとNNではマーカーが表示されません。 javascriptはあまり得意ではないのでわかりやすく説明して頂けると他助かります。 //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(43.05578, 141.353257), 15); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); kyaba =[ [141.353075, 43.053673, "ダミー", "ダミー2", "ダミー3"], [141.352919, 43.054167, "ダミー", "ダミー2", "ダミー3"] ]; for (i = 0; i < kyaba.length; i++){ point = new GPoint(kyaba[i][0], kyaba[i][1]); dada = "<p>" + kyaba[i][2] + "</p>" + "<p>" + kyaba[i][3] + "</p>" + "<p>" + kyaba[i][4] + "</p>"; createMarker(point, dada); function createMarker(point,msg){ var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(msg); }); } } } } //]]> </script>

  • google mapのピンを変更したい

    お店の位置をホームページ上でgoogle mapを使い、お客様にお知らせしたいので、API keyを取得し、位置情報などを入力しているのですが、初期設定の赤いピンマークをお店のオリジナルピンマークに変更したいのですが、方法がわかりません。 書いたコードは… <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <script src="http://maps.google.com/maps?file=api&v=1&key=取得したAPI key" type="text/javascript"></script> </head> <body> <div id="map" style="width: 800px; height: 600px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(135.50537109375,34.687427949314845), 7); // センター 位置 map.centerAndZoom(new GPoint(135.50537109375,34.687427949314845), 7); // お店位置 var point = new GPoint(お店の位置情報); // お店紹介 var html = "<div style='width:350px;font-size:12px;' ><table><tr><td><img src=画像アドレス ></td><td>郵便番号 <br>住所 <br>電話番号<br><br>営業時間<br><br>最寄り駅紹介</td></tr></table></div>"; var marker = createMarker(point,html); map.addOverlay(marker); var marker = createMarker(point,html); map.addOverlay(marker); function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> </script> </body> </html> 以上を入力しました。 この中のどの部分にピン情報を入力すればいいのか? また、どのように入力すればいいのかを教えていただきたいのです。 ご教授お願いいたします。

  • googleMapで情報ウィンドウの表示が崩れる

    お世話になります。 DBに登録したマーカーデータを取り出して グーグルマップに表示するツールを作ったのですが、 マーカーをクリックしてインフォメーションウィンドウを表示すると 「吹き出し」の形が切れ目が入ったように崩れてしまいます。 またそこには取り出したデータを表示もするのですが、 ドラッグして反転させないと見えない状態です。(単に文字色が白?) 以下がプログラムの内容になりますが、何かわかることがありましたらご指摘願えないでしょうか? よろしくお願い致します。 var map function startUp(){ map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.618, 139.7672), 10); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GScaleControl()); map.enableDoubleClickZoom(); GDownloadUrl("load.php", function(doc, stat){ eval("load=" + doc); for(var i=0; i<load.data.length; i++){ var mk = makeMarker(load.data[i].lat, load.data[i].lng, load.data[i].name); map.addOverlay(mk); } }); } function makeMarker(lat, lng, name){ var point = new GLatLng(lat,lng); var marker = new GMarker(point); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml("緯度:" + lat + "<br>経度:" + lng + "<br>施設名:" + name); }); return marker; } 本当はわざわざ関数化することなく下のようにやりたいのですがエラーになるので上のようにしています。 var mk = new GMarker(new GLatLng(load.data[i].lat, load.data[i].lng)); map.addOverlay(mk);

  • Google Map Api 複数のマーカーをおくと、一部が表示されない

    お疲れ様です。 お世話になっております。 Google Map Apiで複数のマーカーを設置するスクリプトを組みました。 10件程度は問題なく表示されるのですが、10件を境に、表示されたり、されなかったりします。 F5で表示されるもの、されないものとまばらになるので、なんとなく原因は、処理よりも表示のほうが速いからではないか?ということなんですが、JSの処理の流れがイマイチわかっていないので、結論は出せません。 実際20件登録したところ、10件~17件の間で出たり出なかったりします。1~10件までは必ず表示され、その後ろのIDを持つものがランダムになります。 これを確実に全部表示されるようにしたいのですが、表示の前にsleepなどかけるのがよいのか、ajaxにしてみるのがよいのかなど、検討がつきません。 下記が、書いたスクリプトです。 もしよければ、アドバイスお願いします。 var markers = new Object(); var marker = new Object(); marker["name"] = "xxx"; marker["icon"] = "ylw-pushpin"; marker["address"] = "座標変換用の住所"; marker["text"] = "噴出しの中身"; marker["center"] = "中心にするかしないか"; markers[0] = marker; 20回ループ markers[20] = marker; googlemap(markers) -----------googlemap(markers) function googlemap(markers) { if (GBrowserIsCompatible()) { geocoder = new GClientGeocoder(); map = new GMap2(document.getElementById("map")); map.addControl(new GSmallZoomControl()); map.addControl(new GScaleControl()); for(var i in markers){ showAddress(markers[i]); //ここは20回ちゃんとまわってるようです } } } ------------------showAddress() function showAddress(amarker) { if (geocoder) { geocoder.getLatLng( amarker['address'], function(point) { if(amarker['center'] == 1){ map.setCenter(point, 12); } //アイコンが指定されてたらアイコンを設定 if(amarker['icon']){ var marker = new GMarker(point,micon); //アラートしてみると、ここが10回~17回ぐらいしか回ってない }else{ var marker = new GMarker(point); } map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(ふきだしのなかみ) }); } ); } }

  • Google Map API2 openInfoWindowHtmlのmaxWidth

    Google Map API2で、openInfoWindowHtmlを使って吹き出しを作ってます。 ドキュメントなどを見ると、maxWidthプロパティで吹き出しの幅を変えられることになっているのですが、いろいろやってみても幅が変わらないようです。 サンプルソース function seeAt(lat, lng, title, body, size) { var point = new GLatLng(lat, lng) map.setCenter(point, size); var html="<b>"+title+"</b><p>"+body+"</p>"; var marker = new GMarker(point); map.addOverlay(marker); map.openInfoWindowHtml(point, html, {maxWidth:400}); } という関数を作っておいて、 <a href="javascript:void(0);" onclick="seeAt(35.55, 139.78, '羽田空港', '', 13);">羽田空港発</a> といった感じで、呼び出します。 地図移動やマーカー、吹き出しや中の文字列はちゃんと表示されるんですが、幅設定だけができません。

  • googleMapでアイコン変更すると情報ウィンドウが開かない

    お世話になります。 タイトルのとおりでマーカークリックで情報ウィンドウが表示される作りなんですが、オリジナルのアイコンに変更するとエラーで開かなくなってしまいます。 以下のプログラムで何か問題があるのでしょうか。 わかる方がいらっしゃいましたら教えて下さい。お願いします。 var map function startUp(){ map = new GMap2(document.getElementById("map")); // DBに登録した位置データを元にマーカー作成 GDownloadUrl("load.php", function(doc, stat){ eval("load=" + doc); for(var i=0; i<load.data.length; i++){ var icon = new GIcon(); // データ区分ごとにマーカーを変える switch(load.data[i].kbn){ case "0": icon.image = "img/blue.gif"; break; case "1": icon.image = "img/green.gif"; break; case "2": icon.image = "img/red.gif"; break; default: } icon.iconSize = new GSize(20,34); icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; icon.shadowSize = new GSize(37,34); icon.iconAnchor = new GPoint(8,34); var mk = makeMarker(load.data[i], icon); map.addOverlay(mk); } }); } function makeMarker(data, icon){ var point = new GLatLng(data.lat, data.lng); var marker = new GMarker(point, icon); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml("表示テスト"); } return marker; }

専門家に質問してみよう