Googleマイマップで描いた地図をGoogle Maps APIで貼り付ける方法
最近公開された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利用例としてご覧下さい。
楽しんで頂ければ幸いです。
トラックバックURL : http://www.geekpage.jp/cgi-bin/tb.cgi?id=2007/4/16
コメント
| ほんのしおり |
|---|
| 本当だ！嬉しく楽しいびっくりです。ご案内、ありがとうございます。 この記事にある通りやってみたらできました。 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 |
| 凄く便利な情報ありがとうございます！ ルート探索や携帯送信などへの対応法も、もしご存知でしたら載せていただけますと幸いです。 |
