GoogleMapSample4:クリックしたら情報ウィンドウ表示（HTML）

17年前

クリックで情報ウィンドウ表示。情報ウィンドウにHTMLを記述。

window.onload = function() {

if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
var point =new GPoint(-122.1419, 37.4419);
var marker = new GMarker(point);
map.centerAndZoom(point, 4);
map.addOverlay(marker);
GEvent.addListener(marker, 'click', function() {
var html = "<strong>こんにちは</strong>これはサンプルです";
marker.openInfoWindow(html);
});
}
}

<div id="map"><!--GoogleMap--></div>

var map = new GMap(document.getElementById("map"));
地図を表示する要素のIDを指定する。

var point =new GPoint(-122.1419, 37.4419);/code>
GPointで地図の中心を指定する。

var marker = new GMarker(point);
マーカーを作成して変数markerに代入。

map.centerAndZoom(point, 4);
マップの中心と拡大率を指定する。

GEvent.addListener(marker, 'click', function()
クリックしたらfunction()内を実行する。

var html = "<strong>こんにちは</strong>これはサンプルです";
変数htmlに表示するHTML文を代入。

表示が崩れる場合CSSでwhite-space:nowrap;を使うと直る場合がある

シェア