Google Maps API V3 InfoWindowオブジェクト

ここではGoogle Maps API V3 InfoWindowオブジェクトについて解説しています。

※2018年7月16日よりAPIキーが必須で有料になりました。
Google Cloud Console にログインしてMaps JavaScript APIとGeocoding APIのキーを発行してください。
https://cloud.google.com/

GoogleMap

デモはこちら
https://office-goto.info/demo/infowindow/

サンプルソース

google.maps.event.addDomListener(window, 'load', function() {
    var latlng = new google.maps.LatLng(35.671277, 139.718489);
    var options = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), options);

    // InfoWindowオブジェクト
    var infowindow = new google.maps.InfoWindow();

    // Markerオブジェクト
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "ツールチップ",
        icon: "icon.png"
    });

    // マーカクリック時
    google.maps.event.addListener(marker, 'click', function (e) {
        infowindow.setContent('Hello World<br />改行HTML表記が使えます。');
        infowindow.open(map, marker);
    });
});

InfoWindowを使用するにはInfoWindowをMarkerオブジェクトに登録します。
InfoWindowはHTML、CSSが適応されて表示されます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください