Googleマイマップで描いた地図をGoogle Maps APIで貼り付ける方法

   このエントリをはてなブックマークに登録    2007/4/16

最近公開されたGoogle Mapのマイマップ機能を使って描いた地図をGoogle Maps APIで貼り付ける方法を説明したいと思います。 マイマップで作った地図データは、KMLとして取得できますが、このKMLを使ってGoogle Maps APIで再利用できます。

マイマップでKMLを生成

最初に、マイマップ機能でKMLを生成します。 まず、http://maps.google.co.jp/の左側にある「マイマップ」タブをクリックします。 その後、「新しい地図を作成」をクリックしますが、ここでGoogleアカウントへのログインが必要になります。 Googleアカウントを持っていない人は、必要に応じて取得しましょう。 メールアドレスがあれば無料で取得できます。

次に、Google Mapのマイマップ機能を使って色々描いてみます。 描き終わったら、KMLファイルをダウンロードします。 マイマップの上部にある「KML」部分を右クリックしてKMLファイルをダウンロードします。

ダウンロードしたファイルは適当に名前を変えるなどして保存します。 保存したKMLファイルをWebサーバで公開して、URLをGGeoXmlに渡せばマイマップで描いた地図を自作のGoogle Mapに貼り付けられます。

KMLを自前のWebサーバに置きたくない場合には、Google Mapのマイマップ機能で作成した地図を「非公開」ではなく「公開」にして、KMLをダウンロードする代わりにURLを取得します。 取得した「http://maps.google....」で始まるURLをGGeoXmlに渡せば、KMLを自前サーバに置かなくてもマイマップで作った地図を貼り付けられます。

Google Maps API で貼り付け

GGeoXmlを利用するとKMLファイルを読み込めます。

「xmlns:v="urn:schemas-microsoft-com.dtd」とstyle宣言部分を忘れるとIEで線(GPolyline)を表示できないのでご注意下さい。 これらを忘れてもFirefoxでは表示されたりするので、この落とし穴は結構ハマれます。

以下のサンプルでは、Google Maps APIのkey部分を「PUTYOURKEYHERE」としていますが、Google Maps 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"
         xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Google Map</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=PUTYOURKEYHERE"
        type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>
    <script type="text/javascript">
    //<![CDATA[
    var map;
    function onLoad() {
      map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(35.97800618085566, 139.207763671875), 6);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GOverviewMapControl());
      map.setMapType(G_HYBRID_MAP);

      var gx = new GGeoXml("http://www.geekpage.jp/blog/script/2007/0416.kml");
      map.addOverlay(gx);
    }
    //]]>
    </script>
  </head>
  <body onload="onLoad()" style="margin:0px; padding:0px;">
    <div id="map"
         style="width:500px; height:500px; margin:0px; padding:0px;"></div>
  </body>
</html>


表示例

上記HTMLファイルを表示すると以下のようになります。 以下の表示例はIFRAMEを使って別ファイルを表示しています。

参考

Google Maps API自体に関する解説は「Google Maps API プログラミング」をご覧下さい。

Javascriptはあまり触りたくないという方は「Google maps簡単作成ツール:GMapCreator」をお試し下さい。 GGeoXml対応はまだしていませんが、そのうちやりたいと思います。 というより、その他、細かいGMapCreator修正は色々と溜まっているんですが。。。 まあ、ボチボチやります。。。

あと、このKML機能を使ってプレコ王国でアマゾンのシングー河タパジョス河イリリ河ジャリ河の地図を作ってみました。 恐らく、ここをご覧の方には何の事だか意味不明ではあると思いますが、もしよろしければKML利用例としてご覧下さい。

楽しんで頂ければ幸いです。

   このエントリをはてなブックマークに登録   



コメント

ほんのしおり
本当だ!嬉しく楽しいびっくりです。ご案内、ありがとうございます。
この記事にある通りやってみたらできました。
http://www.yamas.jp/maps/belka.html
「マイマップ」機能には左側に一覧が出てくるんですが、あれが出せるといいなぁ。これはJavaScriptでkmlファイルを読んであれこれすれば何とかできそうですね。
(あの左側のリストは欲しいけど、順番が変更できないのが欠点ですね。)
arare
マイマップは簡単に線や図形が描くことができて楽しそうですね!でも今までに苦労して作った地図を、マイマップにすることはできないのでしょうか?個人的な質問になってしまって申しわけありません。
piyo
>「xmlns:v="urn:schemas-microsoft-com.dtd」
本当に、これでハマッていました。
ありがとうございます。m(_ _)m
http://piyofactory.com/~geek/staticpages/index.php?page=20070426063711420
もう少しで、ドツボにはまり'document.write'なんか使って地獄行きになるところでした。(^^;
感謝・感謝です。
mori
吹き出しの中身が表示されていませんね。それに私は困っています。どうしたらいいんだー!ひー
zekushiro
凄く便利な情報ありがとうございます!
ルート探索や携帯送信などへの対応法も、もしご存知でしたら載せていただけますと幸いです。

アカマイ 知られざるインターネットの巨人

インターネットのカタチ もろさが織り成す粘り強い世界
「インターネットのカタチ - もろさが織り成す粘り強い世界 -」関連資料

マスタリングTCP/IP OpenFlow編
「マスタリングTCP/IP OpenFlow編」関連資料

Linuxネットワークプログラミング




外部サイト

プレコ王国
ディスカス魂
金魚タイムズ
YouTubeチャネル
Twitter
Facebook

フィードメーター - Geekなぺーじ
Copyright (C) Geekなページ.
All rights reserved. 無断転載や無断コピーなど、私的利用の範囲を逸脱した利用はおやめ下さい.