maps - Google マップが使用している infoWindow を開く方法は?

Question

Google マップで使用される infoWindow を表示したい連絡先ページに Goole マップがあります。

そのリンクに移動します：Gmap

そして、マーカーをクリックします。情報ウィンドウが表示されます。

私の質問は次のとおりです。同じものを自分の Web サイトに追加するにはどうすればよいですか?

Ps : google.maps.InfoWindow オブジェクトの作成方法は知っていますが、自分で html を作成したくありません。

Answer 1

Google マップのドキュメントのこの部分では、これについて説明しています: https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

緯度経度座標を定義する

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

地図のオプションを設定する

var mapOptions = {
  zoom: 4,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

マップを初期化する

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

infowWindow のコンテンツを設定する

var contentString = '<b>Set content for infowindow here in HTML<b>';

コンテンツ文字列で infoWindow を初期化します。

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

上記で定義されたマップ上の以前に定義されたマーカーにマーカーを配置します

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Uluru (Ayers Rock)"
});

最後に、マーカーの「クリック」イベントを、作成した情報ウィンドウにバインドします。

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});