- Home ›
- Google Maps API入門 ›
- ログの出力(GLog) ›
- HERE
HTML形式のログの出力
広告
ログの出力を行う時にHTML形式の文字列をログに出力するにはGLogクラスの静的メソッドであるwriteHtmlメソッドを使います。
GLog.writeHtml(html:String)
テキストを HTML としてログ ウィンドウに書き込みます。
1番目の引数にHTML形式の文字列を指定します。出力されたログはタグなどが解釈された上で表示されます。
実際には次のように記述します。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.172304,136.908306), 15);
GLog.writeHtml("<a href='http://www.example.com/'>Example</a>");
サンプルプログラム
では試してみます。
var map;
var geocoder;
var platlng;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.310748,139.48534), 14);
geocoder = new GClientGeocoder();
GEvent.addListener(map, "click", clickAction);
}
}
function clickAction(overlay, latlng, overlaylatlng){
map.addOverlay(new GMarker(latlng));
platlng = latlng;
geocoder.getLocations(latlng, dispResult);
}
function dispResult(addresses){
if (addresses.Status.code == G_GEO_SUCCESS){
var lat = platlng.lat();
var lng = platlng.lng();
var url = "<a href='http://local.google.co.jp/maps?ie=UTF8&z=12&ll=" + lat + "," + lng + "'<";
url += addresses.Placemark[0].address;
url += "</a>";
GLog.writeHtml(url);
}else{
alert("データを取得できませんでした");
}
}
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>サンプル:HTML形式のログの出力</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
type="text/javascript" charset="utf-8"></script>
<script src="./js/code1_1.js" type="text/javascript"></script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 400px"></div>
</body>
</html>
ではブラウザで上記のURLを見てみます。
今回は地図上でクリックを行うと、その位置にマーカーを設置すると同時にログに座標を出力します。
座標からリバースジオコーディングを行い住所を取得します。取得した住所に対してGoogleマップへのリンクを作成しログへ出力しています。
( Written by Tatsuo Ikura )
AjaxTower