HTML形式のログの出力

広告

ログの出力を行う時にHTML形式の文字列をログに出力するにはGLogクラスの静的メソッドであるwriteHtmlメソッドを使います。

テキストを 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>");

サンプルプログラム

では試してみます。

code3_1.js

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("データを取得できませんでした");
  }
}

map3_1.html

<!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を見てみます。

p3-1

今回は地図上でクリックを行うと、その位置にマーカーを設置すると同時にログに座標を出力します。

p3-2

座標からリバースジオコーディングを行い住所を取得します。取得した住所に対してGoogleマップへのリンクを作成しログへ出力しています。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)