Google Mapの表示とマーカーのふきだし表示方法

このQ&Aのポイント
  • Google Mapを表示する方法とマーカーをクリックせずにふきだしを表示する方法について教えてください。
  • 参考にした記事ではGoogle Mapの表示はできましたが、マーカーをクリックせずにふきだしを表示する方法についての情報がありませんでした。
  • 質問文のコードを確認すると、マーカーをクリックしたときにふきだしを表示するイベントが設定されています。マーカーをクリックせずにふきだしを表示するにはどのように変更すればよいのでしょうか。
回答を見る
  • ベストアンサー

googlemapの表示

http://ascii.jp/elem/000/000/424/424032/index-2.html を参考にして地図は表示できたのですがマーカーをクリックせず地図を表示した段階で ふきだしを表示するにはどのように書き換えればいいのでしょうか? 制御しているのは google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); の箇所というのは判断できるのですがどのように変更すればいいものか教えてください。

  • dcx147
  • お礼率33% (214/636)

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

×google.maps..trigger(marker,"click"); ○google.maps.event.trigger(marker,"click"); これが正解です。 <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById("map_canvas"); var myOptions = { zoom: 16, center: new google.maps.LatLng(35.686773, 139.68815), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, }; var map = new google.maps.Map(mapdiv, myOptions); var marker = new google.maps.Marker({   position: new google.maps.LatLng(35.686773, 139.68815),  map: map, title: 'マーカーのタイトル' }); var infowindow = new google.maps.InfoWindow({ content: '情報ウィンドウ内に表示するHTML', size: new google.maps.Size(50,50) }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); google.maps.event.trigger(marker,"click"); }); </script>

dcx147
質問者

お礼

お返事ありがとうございます。 外してはダメだったのですね^^;clickというのがいらないものと思い込んでおりそうしてしまいましたが おかげ様でうまくいきました^^ 定義はそのままでその後に実行するのがあのコードという意味だったようですね。大変参考になりました!

その他の回答 (3)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

おっとごめんなさい。 サンプルの内容よく見てませんでした。 Ver2までの直接APIコールだと思ってました。 このサンプルは新しいGoogleMapApI Ver3 のやり方ですね。 google.maps..trigger(marker,"click"); に代えて下さい。 リファレンスはこっちでした。 http://code.google.com/intl/en/apis/maps/documentation/v3/reference.html#Mouse%20event

参考URL:
http://code.google.com/intl/en/apis/maps/documentation/v3/reference.html#Mouse%20event
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

イベントはずしちゃだめですよ。 google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); の下にいれるのですよ。 このサンプル見てやってるなら、こんなふうにしてるんじゃないですか <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById('div要素のID'); var myOptions = { zoom: ズーム, center: new google.maps.LatLng(緯度, 経度), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, }; var map = new google.maps.Map(mapdiv, myOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(緯度, 経度), map: map, title: 'マーカーのタイトル' }); var infowindow = new google.maps.InfoWindow({ content: '情報ウィンドウ内に表示するHTML', size: new google.maps.Size(幅, 高さ) }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); GEvent.trigger(marker,"click"); // <=ここに追加 }); </script>

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

GEvent.trigger(source:Object, event:String, ...) というのを使います。 markerふきだしを表示するマーカーの名前がmarkerだとすると、  GEvent.trigger(marker,"click"); これを実行すると、markerのクリックイベントが地図に伝わります。 (リファレンス) http://code.google.com/intl/ja/apis/maps/documentation/reference.html#GEvent.trigger

参考URL:
http://code.google.com/intl/ja/apis/maps/documentation/reference.html#GEvent.trigger
dcx147
質問者

補足

お返事ありがとうございます。 google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); を外し GEvent.trigger(marker,"click"); を入れてみましたがクリックしても何も表示されない状態でマニュアルを見てみたのですが どうすればいいものかわかりません^^; 説明不足だったのかもしれないのですが現状はクリックしなければふきだしが表示されないが これをクリックしなくても表示させるように(初めからふきだしが出てる状態)したいという事なのですが。。。

関連するQ&A

  • GoogleMap クリックで情報ウィンドウ

    GoogleMap API v3で、任意の一点をクリックするとマーカーが置かれ座標取得、 そしてそのマーカーに情報ウィンドウが出るようにしたいと思っています。 //地図クリックイベントの登録 google.maps.event.addListener(map, 'click', function(event) { if (Marker){Marker.setMap(null)}; Marker = new google.maps.Marker({ position: event.latLng, draggable: true, map: map }); infotable(Marker.getPosition().lat(), Marker.getPosition().lng(),map.getZoom()); で、マーカーの設置と座標取得はできるのですが、 new google.maps.InfoWindowをどこに置いていいのかが分かりません。 どなたかお詳しい方、ご教示願えないでしょうか。 宜しくお願い致します。

  • google mapに複数マーカーを設置する関数

    google mapに複数のマーカーとそれに伴う吹き出しを作成しています。 マーカーの数は上下するのですが、大体30~40個くらいが設置される予定です。 ただできるだけjsのソースを少なくしたいと思っているため、ループでまとめて記述できないかと試行錯誤しています。 ちなみに現状は以下のように記述しています。 * * * * * * * * * * * * * * * * * * * * * * * * * var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, title: 'マーカー2' }); var contentString2 = '吹き出しテキスト'; var infowindow2 = new google.maps.InfoWindow({ position: new google.maps.LatLng(座標), content: contentString2 }); google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map,marker2); }); * * * * * * * * * * * * * * * * * * * * * * * * * この「2」の部分を各数字に変えてマーカー分記述していたのですが、 面倒で尚且つソースが非常に多くなるため困っています。 for関数でループさせてみようと思い作成してみたのですが、うまく動作しません。 ちなみに吹き出し内のコメントはすべて違う内容になるため、せめてgoogle.maps.event.addListenerの部分だけでも、と思っています。 javascriptは初心者で、上記のソースも色々調べた上で見よう見まねで作っています。 どなたか効率のよい方法を教えていただけますでしょうか。 よろしくお願い致します。

  • GoogleMapsAPIv3でXMLを取得(3)

    お世話になっております。 何度か質問しているのですが、新たに質問したいことがあります。 現在以下の様な形で、GoogleMapsAPIを使ってXMLデータを取得し、表示させています。  function initialize() { var myLatlng = new google.maps.LatLng(16.636192,158.9062); var myOptions = { zoom: 1, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var infowindow = new google.maps.InfoWindow; downloadUrl("xml/allplaces.xml", function(data) { var markers = data.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var linkurl = markers[i].getAttribute("linkurl"); var html = '<div style="height: 150px; width: 200px"><b>'+name+'</b><br />'+linkurl+'</b>'; var marker = new google.maps.Marker({ map: map, position: point, title: name }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } 10行目の downloadUrl("xml/allplaces.xml", function(data) { の部分でXMLを指定していますが、これをHTML上の <input type="button" id="btn" value="" onClick="" /> といった、ボタンファンクションで、異なるXMLを指定したいです。 つまり、クリックすると出ているマーカーは消えて、ほかのマーカーが出るようにしたいです。 分かる方いらっしゃいましたら、どうぞよろしくお願い致します。

  • Google Map (外部から情報ウィンドウ開く

    Google Maps API v3 において「地図外のHTMLから地図内の情報ウィンドウを開く」ということをやろうとしているのですが、どうにもうまくいきません。 下記コードにおいて、地図外にある「あいうえお商店」や「かきくけこ不動産」をクリックした際、地図内に情報ウィンドウが開くようにするためにはどのようにすればよいでしょうか。 すでに丸3日間悩んでおり、私の力ではどうにもならないと判断したため、皆さまのお力をお借りすることにしました。大変恐れ入りますが、貧弱な知識の私にどうか知恵を与えてやって下さい。どうぞよろしくお願い致します。 深みにはまって抜け出せないコードは以下の通りです。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶 function initialize() { var latlng = new google.maps.LatLng(35.67105, 139.743624); var opts = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); // ***************1件目のデータ*************** var m_latlng1 = new google.maps.LatLng(35.675224, 139.737914); var marker1 = new google.maps.Marker({position: m_latlng1,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|3CFFF8|000000',title: '港区赤坂3-3-3' }); var contentString1= '</p>あいうえお商店</p></div>'; var infowindow1 = new google.maps.InfoWindow({content: contentString1 }); // ***************1件目のデータ*************** // ***************2件目のデータ*************** var m_latlng2 = new google.maps.LatLng(35.670772, 139.733875); var marker2 = new google.maps.Marker({position: m_latlng2,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|3CFFF8|000000',title: '港区赤坂5-5-5' }); var contentString2= '</p>かきくけこ不動産</p></div>'; var infowindow2 = new google.maps.InfoWindow({content: contentString2 }); // ***************2件目のデータ*************** google.maps.event.addListener(marker1 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow1.open(map,marker1); currentInfoWindow = infowindow1; }); google.maps.event.addListener(marker2 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow2.open(map,marker2); currentInfoWindow = infowindow2; }); } function myclick(idx) { google.maps.event.trigger(marker[idx],'click'); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 700px; height: 500px"></div> 1 <a href="javascript:myclick(0)">あいうえお商店</a></p> 2 <a href="javascript:myclick(1)">かきくけこ不動産</a></p> </body> </html> ---------------------------------------------------------------- 大変恐れ入りますが、どうぞよろしくお願い致します。

  • Google Maps V3のズームの規制

    現在htmlにはhead内に <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=123456&sensor=false"></script> <script language="JavaScript" type="text/javascript" src="v3.js"></script> v3スクリプト内に //functionコード function mapload() { var latlng = new google.maps.LatLng(123,456); var opts = { zoom: 16, center: latlng, //マップタイプHYBRID(航空写真+地図)ROADMAP(地図)SATELLITE(航空写真)TERRAIN(地形) mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeId: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN ] } }; //IDコード var map = new google.maps.Map (document.getElementById("map"),opts); //Marker var LatLng = new google.maps.LatLng(123,456); var contentString = 'ここです!€'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var image = new google.maps.MarkerImage ('アイコンURL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var shadow = new google.maps.MarkerImage ('アイコン影画像URL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var marker = new google.maps.Marker({ position: LatLng, map: map, title: "ここです!",icon: image,shadow: shadow }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); } と記載し、html内のスクリプトのとこに表示しています。 表示される地図のズームを規制したいと考え、mapType.maxZoom = 19; mapType.minZoom = 2;のようなものを記入しても何も変化しません。 上記スクリプトの表記のどこに何を入れれば規制できるのでしょうか。 追伸、google.maps.MapTypeId.TERRAINと地図と地形のみ表示指定しているのですが、実際は、地図と航空地図になります。

  • GoogleMapを複数表示させたい

    GoogleMap を API で2つ表示させて、それぞれの地図にマーカーをひとつずつつけたいです。 マーカーをつけて吹き出すをだすまではできたのですが、 マップをもうひとつ増やすにはどのように記述すればよいでしょうか? 現在のソースは以下です -------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> #Gmap{ width:500px; height:500px; } </style> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=http://maps.google.com/maps?file=api&amp;v=2&amp;key=" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //地図を作成 var map = new GMap2(document.getElementById("Gmap")); map.setCenter(new GLatLng(35.675845,139.744763), 15); //マーカーを作成 var marker = new GMarker(new GLatLng(35.675845,139.744763)); //マーカーをクリックしたら、吹き出しの中に写真を表示する GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("テキストが入ります"); }); //マーカーを地図上に配置 map.addOverlay(marker); //縮尺移動のコントロールを設置 map.addControl(new GLargeMapControl()); //地図衛星写真 切り替えボタンを表示 map.addControl(new GMapTypeControl()); //縮尺表示 map.addControl(new GScaleControl()); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="Gmap"></div> </body> </html> -------------------------------------------------------- よろしくお願いいたします

  • googlemap api で複数マーカー表示

    複数のマーカー表示は最初できてたんですが、 住所から座標を取得してマーカーを複数表示ができません。。 <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); //地図を作成 map.setCenter(new GLatLng(35.969115,139.372559), 8); //地図を表示((中心の緯度,経度),縮尺) map.addControl(new GSmallMapControl()); //マップコントローラを付ける map.addControl(new GMapTypeControl()); //マップタイプコントローラを付ける map.addControl(new GScaleControl()); //スケールコントローラを付ける map.removeMapType(G_HYBRID_MAP); //マップタイプコントローラから地図+写真を削除する map.enableScrollWheelZoom(); //マウスホイールによるズーム処理を有効化 //マーカー追加プログラム function addMarker(lat,lng,html) { var geocoder = new GClientGeocoder(); geocoder.getLatLng ( lat, function(point) { var marker = new GMarker(new GLatLng(point,lng)); //マーカー生成 GEvent.addListener(marker,"mouseover",function(){marker.openInfoWindowHtml(html);});//マーカーにマウスが当たると情報ウィンドウを表示する map.addOverlay(marker); //マーカーをオーバレイ表示する } ); } //マーカー追加 addMarker("横浜市",'<p>html</p>'); addMarker("東京都",'<p>html</p>'); } } </script> </head> <body onload="load()" onunload="GUnload()"> 中略・・・ 初心者なもので、、、 ご回答お願いいたします。

  • グーグルマップAPIで右クリックで吹き出し

    お世話になっております。 グーグルマップAPIを使ってサイトを作成しています。 右クリックをして、吹き出しを出すにはどうしたらよろしいでしょうか? 以下のようなスクリプトがあるのですが、全く反応しません。 google.maps.event.addListener(map, "rightclick", function() { infowindow.setContent(contentString); infowindow.open(map,marker); document.getElementById("result").innerHTML += "<br>rightclickイベント発生:"+(new Date()); 上記ではなく、rightclickの部分をclickにすると動きますが、右クリックで動作させたいのです。 できれば、その吹き出しの中にフォームを作りたいと思っています。 よろしくお願い致します。

  • WordpressのGmapに吹き出しを付けたい

    wordpressにACFを利用して埋め込んでいるGooglemapのピンにクリックで表示される吹き出しを付けたいのですが、うまくいきません。 しばらく前にwordpressのサポートでも質問したのですが回答を得られなかったのでかなり困っています。 状況としては、 「Advanced Custom Fieldsの全項目解説・公開側表示編集編」(http://blog.s-giken.net/253.html#googlemap) を参考に下記のように書きました。 記述場所はphpファイル内です。 <?php $name = get_field ( 'name' ); $map = get_field ( 'map' ); echo '<div id="map" style="width: 95%; height: 300px; margin:5px auto;"></div>'; echo '<span itemprop="hasMap"><script type="text/javascript">'; echo ' google.maps.event.addDomListener(window,"load",function(){'; echo ' var mapdiv=document.getElementById("map");'; echo ' var myOptions={zoom:15,center:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),mapTypeId:google.maps.MapTypeId.ROADMAP,scaleControl:true};'; echo ' var map=new google.maps.Map(mapdiv,myOptions);'; echo ' var marker=[];'; echo ' var infowindow=[];'; echo ' marker[0]=new google.maps.Marker({icon:"http://maps.google.com/mapfiles/kml/paddle/red-stars.png",position:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),map:map,title:"' . $name . '"});'; echo ' var markerCluster=new MarkerClusterer(map,marker);'; echo ' });'; echo '</script></span>'; ?> この状態でACF側で入力した住所をもとにマップ上に指定のマーカーを立てることはできているのですが、ここにクリックで表示される吹き出しを追加しようとしてもうまくいきません。 「マーカーがクリックされたら情報ウィンドウ(ふきだし)を表示する」(http://www.openspc2.org/reibun/Google/Maps/API/ver3/code/map/marker/0004/) や 「配列を使用してGoogleMapに複数のマーカと情報ウィンドウを表示する」(https://ghweb.info/post-2709.html) を参考にいろいろいじってみて、 google.maps.event.addListener(marker, "click", function() { infowindow[0]=new google.maps.InfoWindow({ content: "このコンテンツを表示します" }); infowindow.open(map, marker); }); みたいな感じのをecho' 'で挟んで追記すれば動くかなと試したのですが、どうもうまくいきません。 解決方法をご教授いただければ幸いです。

  • google map吹き出し

    下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが 吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); setInterval ( function() { var now = new Date().getTime(); var diff = targetDate - now; var day = Math.floor ( diff / 86400000 ); diff -= day * 86400000; var hour = Math.floor ( diff / 3600000 ); diff -= hour * 3600000; var minute = Math.floor ( diff / 60000 ); diff -= minute * 60000; var second = Math.floor ( diff / 1000 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>

    • ベストアンサー
    • AJAX

専門家に質問してみよう