Leaflet.jsでGoogle Maps を表示する

最終更新日

「Leafletでグーグルマップって使えないんですか?」という質問が多かったので書いておきます。

Google Maps Tileを表示する

LeafletでGoogle Mapsの地図を表示するにはプラグインを使う必要があります。
Leaflet pluginsをダウンロードし、「layerフォルダ→tileフォルダ」の中のGoogle.jsを読み込んでください。
また、leaflet以外にGoogle Maps APIも読み込む必要があります。

Hello Gmaps

leaflet and Google

example

カスタムスタイルを使う

Google Maps API のスタイル指定機能も使えます。

Styled Maps   |   Google Maps JavaScript API   |   Google Developers

leaflet and Google custom style

example

カスタマイズは、「Google Maps API Styled Map Wizard」や「Google MapBuildr」などのサービスを利用すると便利です。

さぁこれでLeafletを使わない理由は無くなりましたね!