KMLファイルを使ってWebサイトにマイマップを表示させる方法を福岡一わかりやすく解説します

GoogleはGoogle マップをアップデートしたため、以前のKMLファイルを使ったGoogle マップを表示する際に、「一部のカスタムオンマップコンテンツは表示されない場合があります」という通知が表示されるようしています。

今回は、アップデートに対応した、Webサイト上にKMLファイルを使ったマップを表示する方法を解説します。

マイマップの作成

マイマップ

まず、KMLを作成するためには「マイマップ」を作成する必要があります。
「新しい地図を作成」からマイマップを作成しましょう。

KMLのダウンロード

KML

マイマップを作成すると画像ような表となります。画像の赤○で囲んでいる個所をクリックするとドロップダウンメニューが現れ、「KMLにエクスポート」項目が表示されるのでそれを選択し、KMLファイルをローカルに保存します。

KMLファイル利用したWebサイトを制作

WebサイトでKMLファイルを利用したGoogle マップを表示する方法の一つとして、「Google Maps JavaScript API」があります。

今回はこのAPIを利用して表示させる、簡単なサンプルコード紹介します。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Layers</title>
    <style>
      html, body {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
	  #map-canvas {
        width: 600px;
		height: 300px;
		margin: 100px auto 0;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
function initialize() {
  var mapPoint = new google.maps.LatLng(33.557892, 130.426295);//最初に表示される地図の表示場所
  var mapOptions = {
    zoom: 14,
    center: mapPoint
  }

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://testsite.eight-web.com/eight/map/fukuokaramen3.kmz'//KMLファイル
  });
  ctaLayer.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

サンプルサイト

注意点

KMLファイルですがWebにアップして、URLで参照する必要があるようです(相対パスでは非表示となる)。なので、サンプルコードのようにhttp//:～から始まるように指定してください。

最初に表示される地図の表示場所は緯度・経度をしていしなければなりません。Geocodingで調べるとよいと思います。

まとめ

今回APIを使用していますが、難しい登録もなく、簡単に利用できるようなのでKMLファイルを使ったサイト制作を考えている方の参考になればと思います。

ご質問・ご意見は、お気軽にコメント・ツイッターなどでいただければ幸いです