ENGLISH page is here.
GET DinopSearchBar
サイト内検索:
HOME
VC++ TIPS
ダウンロード
DinopExifReader
DinopSearchBar
DinopSearchBar mini
DinopTabbingBar
for Firefox
大阪湾の生き物
甲子園浜の自然
甲子園浜の干潟
甲子園浜の水中
甲子園浜の野鳥
近畿の山々
植物図鑑
箕面マップ
水中機材
カメラ
ランキング
望遠鏡の世界
顕微鏡の世界
Googleのすべて
GoogleマップAPI
ニュース
読んだ本
日記
変な料理の作り方
遺伝子操作
論文紹介
デイトレード
自動売買でFX
ネットで小遣い稼ぎ
Solaris
電子工作
その他
問い合わせ
VC++用コード集
大阪湾の生き物
水中用機材
since:2000/11/15
dinopcom@gmail.com
www.dinop.comは
だいのっぷ・どっと・こむ
と読んでください。







« 衛星写真に切り替える | メイン | 複数のコメントを設置する »

コメントに改行やリンク、画像を入れる




はじめに

 Google Maps(Google Local)のAPIを利用する方法を簡単に紹介しています。今回 は「作成したコメントに改行やリンク、画像などを入れる方法について」です。



コメントに改行を設定

 前回に作成したコードのコメントを変更します。
<!DOCTYPE html PUBLIC "-//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">
    <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 4);
    
    function AddGMarker(objMap,nLatitude,nLongitude,strHtml)
    {
       var objPoint = new GPoint(nLatitude,nLongitude);
       var objMarker = new GMarker(objPoint);

       GEvent.addListener(objMarker,"click",function(){ objMarker.openInfoWindowHtml(strHtml); });
       objMap.addOverlay(objMarker);
    }

    AddGMarker(map,135.3659722,34.72072222,"甲子園駅<br><br>阪神タイガースの本拠地としても知<br>られる甲子園球場の目の前にあり<br>ます。");
    
    //]]>
    </script>
  </body>
</html>
 赤字が変更する部分です。
 太字の部分はAPI Keyです(人それぞれ異なる値です)。

 実際に動かし赤い目印をクリックするとコメントが改行されているのが分かります。このように改行は 「<br>」という文字を使います。



コメントにリンクと画像を設定

 ここまで書けば予想がつくと思いますが、コメントにはHTMLのタグが使えます。そのため HTMLを書くように普通に作ればいいわけです。
<!DOCTYPE html PUBLIC "-//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">
    <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 4);
    
    function AddGMarker(objMap,nLatitude,nLongitude,strHtml)
    {
       var objPoint = new GPoint(nLatitude,nLongitude);
       var objMarker = new GMarker(objPoint);

       GEvent.addListener(objMarker,"click",function(){ objMarker.openInfoWindowHtml(strHtml); });
       objMap.addOverlay(objMarker);
    }

    AddGMarker(map,135.3659722,34.72072222,"<img src=http://www.dinop.com/google/map/use_html_comment_test.gif align=left>甲子園駅<br><br><a href=http://www.hanshintigers.jp/ target=_blank>阪神タイガース</a>の本拠地としても知<br>られる甲子園球場の目の前にあり<br>ます。<br clear=left>");
    
    //]]>
    </script>
  </body>
</html>
 赤字が変更する部分です。
 太字の部分はAPI Keyです(人それぞれ異なる値です)。

 実際に動かし赤い目印をクリックするとコメントにリンクや画像がついているのが分かります。









Copyright (c) 1999-2007 issei. All rights reserved. (運営者情報