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利用例としてご覧下さい。

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

過去記事

過去記事一覧

超凄いIPv6解説書(488ページ)を無料配布します！

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

マイマップでKMLを生成

Google Maps API で貼り付け

表示例

参考

最近のエントリ

過去記事

YouTubeチャンネルやってます！