WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： プログラム >JavaScript

数年前よりGoogle Mapにオリジナルのマーカーや、情報の吹き出しを表示させるなどのカスタマイズをして自身のサイトに埋め込むためには、

• APIキーを発行
• クレジットカードの支払情報を登録

など、Google Map埋め込みには、何かと手間がかかるようになりました。

ですが、そんなGoogle Mapの見た目はそのままに、無料で、APIキーの発行も必要がないカスタマイズした地図をサイトに埋め込む方法がありますので、今回はその方法をご紹介します。

Leaflet.jsを利用

今回の目的を実現するためには、「Leaflet.js」というサービスを利用します。

完成形はこちら

See the Pen
Untitled by tack777 (@tack777)
on CodePen.

まずはCSSとJavascriptを読み込み

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

まずは必要となるCSSとJavascriptのファイルを、headタグ内で読み込みます。

Mapが表示される領域とそのサイズを指定

<div id="map"></div>

#map {
      width: 100%;
      height: 400px;
}

次に、Google Mapの埋め込み時と同様に、マップが描画される領域の記述と、そのサイズをCSSで指定します。

Mapの初期化

var map = L.map('map').setView([35.181435,136.906418], 7);
// 今回は名古屋市役所の住所を指定

マップが描画される領域の指定ができたら、初期表示の指定をします。
上記のコードをコピーしてそのまま使用できます。
最後の数字は順に【緯度】【経度】【ズーム値】となっています。
この数値を修正することで、任意の場所・ズーム値で初期表示することができます。

Google Mapの「タイル」を指定

L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}').addTo(map),
      {
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
      };

先ほどのステップのJavascriptに続けて上記の内容を記述することで、Google Mapの見た目の地図が表示されるようになります。

マーカーの設置

表示されたGoogle Mapの中に任意の箇所にマーカーを設置したい場合は、さらにJavascriptで下記のように続けます。

var marker01 = L.marker([35.181435,136.906418]).addTo(map);
// ここで指定した緯度経度のポイントにマーカーが設置される

// 吹き出し付きのマーカーを設置する場合
var marker02 = L.marker([35.181435,136.900418]).addTo(map).bindPopup("吹き出し付き");

最終結果

ここまでのソースコードを利用すると下記のようなマップが出来上がります。
左側のマーカーには、クリックすると吹き出しが表示される機能を付与しています。

See the Pen
Untitled by tack777 (@tack777)
on CodePen.

まとめ

今回は「Leaflet.js」を使用して、Google Mapの見た目で無料でサイトに埋め込むことができるマップを作成することができました。

この「Leaflet.js」は、Google Mapの他にも、世界中の様々な種類の地図を表示させることができますので、興味のある方はぜひ調べてみてください。