複数のマーカーが配置された地図を作る方法 (その４)

オープンソースなどの WEBアプリ を利用する。
WEBアプリには地図を作成したり、KML ファイルで保存できるものがあります。
ここでは XOOPS の Weblinks を例にしています。

この方法は３つのステップに分かれます。

1. WEBアプリ
(1) すでに 利用できる WEBアプリ があるものとする。
(2) WEBアプリ を使って地図を作成します。
(3) 作成した地図を KML ファイルで保存する。
詳細は それぞれのWEBアプリの使用方法を ご覧ください。

2. GoogleMapsAPI
(1) GoogleMapsAPI を使って KML ファイルを表示する JavaScript を作成します。
ここはGoogleEarth を使って地図を作成する と同じです。

3. WEBサイト (ネットコモンズ)
(1) 作成した KML ファイルを FTP などでアップロードする。
(2) 作成した JavaScript を ブログパーツ・モジュール に貼る
ここは GoogleEarth を使って地図を作成する と同じです。

欠点
他のWEBアプリ と ネットコモンズ の併用となる。

この地図は下記の WEBアプリ で作成したものです
はっぴぃ・りなっくす - WEBリンク集のデモ - 横浜市

<script src="http://maps.google.co.jp/maps?hl=ja&amp;file=api&amp;v=2&amp;key=APIキー" type="text/javascript"></script>
<script type="text/javascript">
var map;
function map_show() {
  if (GBrowserIsCompatible()) {
    var geoXml = new GGeoXml("http://ynug.aztech.jp/uploads/weblinks.kml");
    map = new GMap2(document.getElementById("map_canvas"));
    map.addControl(new GSmallMapControl());
    map.setCenter(new GLatLng(35.44277093, 139.63760376), 10);
    map.addOverlay(geoXml);
  }
}
window.onload = map_show;
</script>
<div id="map_canvas" style="width: 400px; height: 400px; float:left; border: 1px solid black;"></div>

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
  <Document>
      <name>はっぴぃ・りなっくす - WEBリンク集のデモ</name>
          <open>1</open>
    <Folder>
      <name>page 1</name>
<Placemark>
  <name>横浜市役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/">http://www.city.yokohama.jp/</a><br /><br />
神奈川県横浜市 人口：365万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=75">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.6380762,35.443575</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>青葉区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/aoba/">http://www.city.yokohama.jp/me/aoba/</a><br /><br />
横浜市青葉区 人口：30万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=76">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.537096,35.552707</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>旭区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/asahi/">http://www.city.yokohama.jp/me/asahi/</a><br /><br />
横浜市旭区 人口：24万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=77">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.544864,35.474563</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>泉区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/izumi/">http://www.city.yokohama.jp/me/izumi/</a><br /><br />
横浜市泉区 人口：15万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=78">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.489056,35.417871</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>磯子区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/isogo/">http://www.city.yokohama.jp/me/isogo/</a><br /><br />
横浜市磯子区 人口：16万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=79">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.61854935,35.40227368</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>神奈川区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/kanagawa/">http://www.city.yokohama.jp/me/kanagawa/</a><br /><br />
横浜市神奈川区 人口：22万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=80">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.629364,35.477097</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>金沢区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/kanazawa/">http://www.city.yokohama.jp/me/kanazawa/</a><br /><br />
横浜市金沢区 人口：21万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=81">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.624493,35.337201</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>港南区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/konan/">http://www.city.yokohama.jp/me/konan/</a><br /><br />
横浜市港南区 人口：22万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=82">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.591277,35.400542</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>港北区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/kohoku/">http://www.city.yokohama.jp/me/kohoku/</a><br /><br />
横浜市港北区 人口：32万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=83">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.633044,35.519044</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>栄区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/sakae/">http://www.city.yokohama.jp/me/sakae/</a><br /><br />
横浜市栄区 人口：12万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=84">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.553809,35.364662</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>瀬谷区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/seya/">http://www.city.yokohama.jp/me/seya/</a><br /><br />
横浜市瀬谷区 人口：12万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=85">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.498865,35.466324</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>都筑区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/tsuzuki/">http://www.city.yokohama.jp/me/tsuzuki/</a><br /><br />
横浜市都筑区 人口：19万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=86">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.570614,35.544326</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>鶴見区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/tsurumi/">http://www.city.yokohama.jp/me/tsurumi/</a><br /><br />
横浜市鶴見区 人口：26万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=87">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.6826,35.508439</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>戸塚区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/totsuka/">http://www.city.yokohama.jp/me/totsuka/</a><br /><br />
横浜市戸塚区 人口：27万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=88">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.53229,35.396327</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>中区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/naka/">http://www.city.yokohama.jp/me/naka/</a><br /><br />
横浜市中区 人口：19万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=89">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.642181,35.444699</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>西区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/nishi/">http://www.city.yokohama.jp/me/nishi/</a><br /><br />
横浜市西区 人口：9万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=90">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.616877,35.453609</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>保土ケ谷区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/hodogaya/">http://www.city.yokohama.jp/me/hodogaya/</a><br /><br />
横浜市保土ケ谷区 人口：20万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=91">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.59596,35.460006</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>緑区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/midori/">http://www.city.yokohama.jp/me/midori/</a><br /><br />
横浜市緑区 人口：17万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=92">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.538011,35.512407</coordinates>
</Point>
</Placemark>
<Placemark>
  <name>南区役所</name>
  <description><![CDATA[ <a href="http://www.city.yokohama.jp/me/minami/">http://www.city.yokohama.jp/me/minami/</a><br /><br />
横浜市南区 人口：9万人<br /><br />
from <a href="http://linux.ohwada.jp/modules/weblinks0/singlelink.php?lid=93">はっぴぃ・りなっくす</a><br />
 ]]></description>
<Point>
<coordinates>139.608587,35.431515</coordinates>
</Point>
</Placemark>
  </Folder>
  </Document>
</kml>