音声ブラウザ対応ページへコンテンツエリアへ新規登録ログイン



サイト内検索画面へ移動します 検索

GoogleEarth を使って地図を作成する

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

グーグルが提供している GoogleEarth (パソコン・アプリ) を利用する。
この方法は３つのステップに分かれます。

1. GoogleEarth
(1) GoogleEarth をパソコンにインストールする。
(2) GoogleEarth を使って地図を作成します。
(3) 作成した地図を KML ファイルで保存する。
詳細はCreate Maps with Google Earth (英語版) をご覧ください

2. GoogleMapsAPI
(1) GoogleMapsAPI を使って KML ファイルを表示する JavaScript を作成します。
詳細は Google Maps API について をご覧ください

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

欠点
GoogleEarth と GoogleMapsAPI の２つの知識が必要になる。


実例： GoogleEarth

JavaScript の見本

<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/yokohama.kml");
    map = new GMap2(document.getElementById("map_canvas"));
    map.addControl(new GSmallMapControl());
    map.setCenter(new GLatLng(35.44474443019686, 139.6419972338996), 15);
    map.addOverlay(geoXml);
  }
}
window.onload = map_show;
</script>
<div id="map_canvas" style="width: 400px; height: 400px; float:left; border: 1px solid black;"></div>


KML ファイルの見本

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
    <name>横浜市.kml</name>
    <StyleMap id="msn_blu-circle">
        <Pair>
            <key>normal</key>
            <styleUrl>#sn_blu-circle</styleUrl>
        </Pair>
        <Pair>
            <key>highlight</key>
            <styleUrl>#sh_blu-circle</styleUrl>
        </Pair>
    </StyleMap>
    <Style id="sh_blu-circle">
        <IconStyle>
            <scale>1.3</scale>
            <Icon>
                <href>http://maps.google.com/mapfiles/kml/paddle/blu-circle.png</href>
            </Icon>
            <hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/>
        </IconStyle>
        <ListStyle>
            <ItemIcon>
                <href>http://maps.google.com/mapfiles/kml/paddle/blu-circle-lv.png</href>
            </ItemIcon>
        </ListStyle>
    </Style>
    <Style id="sh_ltblu-circle">
        <IconStyle>
            <scale>1.3</scale>
            <Icon>
                <href>http://maps.google.com/mapfiles/kml/paddle/ltblu-circle.png</href>
            </Icon>
            <hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/>
        </IconStyle>
        <ListStyle>
            <ItemIcon>
                <href>http://maps.google.com/mapfiles/kml/paddle/ltblu-circle-lv.png</href>
            </ItemIcon>
        </ListStyle>
    </Style>
    <Style id="sn_blu-circle">
        <IconStyle>
            <scale>1.1</scale>
            <Icon>
                <href>http://maps.google.com/mapfiles/kml/paddle/blu-circle.png</href>
            </Icon>
            <hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/>
        </IconStyle>
        <ListStyle>
            <ItemIcon>
                <href>http://maps.google.com/mapfiles/kml/paddle/blu-circle-lv.png</href>
            </ItemIcon>
        </ListStyle>
    </Style>
    <StyleMap id="msn_purple-circle">
        <Pair>
            <key>normal</key>
            <styleUrl>#sn_purple-circle</styleUrl>
        </Pair>
        <Pair>
            <key>highlight</key>
            <styleUrl>#sh_purple-circle</styleUrl>
        </Pair>
    </StyleMap>
    <Style id="sn_purple-circle">
        <IconStyle>
            <scale>1.1</scale>
            <Icon>
                <href>http://maps.google.com/mapfiles/kml/paddle/purple-circle.png</href>
            </Icon>
            <hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/>
        </IconStyle>
        <ListStyle>
            <ItemIcon>
                <href>http://maps.google.com/mapfiles/kml/paddle/purple-circle-lv.png</href>
            </ItemIcon>
        </ListStyle>
    </Style>
    <StyleMap id="msn_ltblu-circle">
        <Pair>
            <key>normal</key>
            <styleUrl>#sn_ltblu-circle</styleUrl>
        </Pair>
        <Pair>
            <key>highlight</key>
            <styleUrl>#sh_ltblu-circle</styleUrl>
        </Pair>
    </StyleMap>
    <Style id="sn_ltblu-circle">
        <IconStyle>
            <scale>1.1</scale>
            <Icon>
                <href>http://maps.google.com/mapfiles/kml/paddle/ltblu-circle.png</href>
            </Icon>
            <hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/>
        </IconStyle>
        <ListStyle>
            <ItemIcon>
                <href>http://maps.google.com/mapfiles/kml/paddle/ltblu-circle-lv.png</href>
            </ItemIcon>
        </ListStyle>
    </Style>
    <Style id="sh_purple-circle">
        <IconStyle>
            <scale>1.3</scale>
            <Icon>
                <href>http://maps.google.com/mapfiles/kml/paddle/purple-circle.png</href>
            </Icon>
            <hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/>
        </IconStyle>
        <ListStyle>
            <ItemIcon>
                <href>http://maps.google.com/mapfiles/kml/paddle/purple-circle-lv.png</href>
            </ItemIcon>
        </ListStyle>
    </Style>
    <Folder>
        <name>横浜市</name>
        <open>1</open>
        <Placemark>
            <name>横浜市役所</name>
            <description><![CDATA[<a href="http://www.city.yokohama.jp/ ">横浜市役所</a>]]></description>
            <LookAt>
                <longitude>139.6373483867764</longitude>
                <latitude>35.44445778727835</latitude>
                <altitude>0</altitude>
                <range>733.2889269424672</range>
                <tilt>0</tilt>
                <heading>0.001707752745959056</heading>
                <altitudeMode>relativeToGround</altitudeMode>
                <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
            </LookAt>
            <styleUrl>#msn_blu-circle</styleUrl>
            <Point>
                <coordinates>139.6377732354127,35.44408187411899,0</coordinates>
            </Point>
        </Placemark>
        <Placemark>
            <name>横浜市中区役所</name>
            <description><![CDATA[<a href="http://www.city.yokohama.lg.jp/naka/">横浜市中区役所</a>]]></description>
            <LookAt>
                <longitude>139.6419972338996</longitude>
                <latitude>35.44474443019686</latitude>
                <altitude>0</altitude>
                <range>182.3571914712827</range>
                <tilt>0.1446876663552024</tilt>
                <heading>-0.2524817517090801</heading>
                <altitudeMode>relativeToGround</altitudeMode>
                <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
            </LookAt>
            <styleUrl>#msn_ltblu-circle</styleUrl>
            <Point>
                <coordinates>139.6419972338996,35.44474443019686,0</coordinates>
            </Point>
        </Placemark>
        <Placemark>
            <name>神奈川県庁</name>
            <description><![CDATA[<a href="http://www.pref.kanagawa.jp">神奈川県庁</a>]]></description>
            <LookAt>
                <longitude>139.6450002196464</longitude>
                <latitude>35.44861580336326</latitude>
                <altitude>0</altitude>
                <range>2022.456402798853</range>
                <tilt>0.1447205490914572</tilt>
                <heading>-0.250740077923781</heading>
                <altitudeMode>relativeToGround</altitudeMode>
                <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
            </LookAt>
            <styleUrl>#msn_purple-circle</styleUrl>
            <Point>
                <coordinates>139.6426239467513,35.44769382925176,0</coordinates>
            </Point>
        </Placemark>
    </Folder>
</Document>
</kml>


イベント

カレンダー をご覧ください



yn150
hina

メニュー

トップページ
12月21日 コモンズネット12月9日 横浜メディア研究会10月29日 OSSセミナー10月17日 YN150説明会9月19日 公開セミナーYN150 プロジェクトノウハウ
地図を表示するグーグル地図モジュールマイマップGoogle Maps APIGoogle EarthWEBアプリHTML 編集権限
ネットコモンズ とは資料キャビネットリンク集ニュースカレンダーフォーラム入会・規約お問合せ
Powered by NetCommons2 The NetCommons Project