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

解決済

質問者：blackbelt2004
質問日時：2014/02/27 08:59
回答数：1件

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をどこに置いていいのかが分かりません。

どなたかお詳しい方、ご教示願えないでしょうか。
宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2014/02/27 10:58

クリックしたときにマーカーと情報ウィンドウが同時に表示されるのか、クリックするごとにマーカーは増えてゆくのかなど不明なところはありますが、勝手に、マーカー表示は一個のみで情報ウィンドウも同時に表示されると解釈して、ご参考までに。

（表示方法を変えないと、このままではマーカーと重なってしまっていますが…）

（全角空白は半角に）
<!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 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 …