- ベストアンサー
GoogleMapクリックで情報ウィンドウを表示する方法
- GoogleMap API v3を使用して、任意の一点をクリックするとマーカーが置かれて座標が取得できるようにしたい。
- マーカーに情報ウィンドウを表示するために、新しいgoogle.maps.InfoWindowをどこに置けばいいかわからない。
- マーカーの設置と座標の取得はできるが、情報ウィンドウの配置方法について詳しい方のアドバイスを求めています。
- blackbelt2004
- お礼率82% (24/29)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
クリックしたときにマーカーと情報ウィンドウが同時に表示されるのか、クリックするごとにマーカーは増えてゆくのかなど不明なところはありますが、勝手に、マーカー表示は一個のみで情報ウィンドウも同時に表示されると解釈して、ご参考までに。 （表示方法を変えないと、このままではマーカーと重なってしまっていますが…） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize(){ //地図を表示 var latlng = new google.maps.LatLng(35.69, 139.70); var map = new google.maps.Map(document.getElementById("map"),{ zoom : 16, center : latlng, mapTypeId : google.maps.MapTypeId.ROADMAP }); //InfoWindow定義 var infoWnd = new google.maps.InfoWindow(); function showInfo(){ var pos = marker.getPosition(); var content = "<p style='width:100px; height:30px;'>lat=" + fix(pos.lat()) + "<br>lng=" + fix(pos.lng()); infoWnd.setOptions({ position: pos, content: content }); infoWnd.open(map); } function fix(num){ return (num*10000 | 0)/10000; } //Marker作成 var marker = new google.maps.Marker({ position:latlng, map: map, draggable: true, visible:false }); google.maps.event.addListener(marker, "click", showInfo); //clickイベント処理 google.maps.event.addListener(map, 'click', function(evt){ marker.setPosition(evt.latLng); marker.setVisible(true); showInfo(marker); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map" style="width:800px; height:600px; "></div> </body> </html> マーカーを追加していくなら、新しいオブジェクトを作成するようにすればよろしいかと。 （上のサンプルでは一つを使いまわしています） google mapに関しては以下に情報が公開されていますので、たいていのことはここで調べればわかります。 （この回答も、ここを見ながら作成しました） https://developers.google.com/maps/documentation/javascript/reference?hl=ja
お礼
マーカー作成とウィンドウ表示を同時に行うという事で混同しておりました。 リンク先の解説でようやく理解しました。 熟読して更に理解しようと思います。 ありがとうございました。