GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

Leaflet.jsでGoogle Maps を表示する

     - Google Map API, leaflet.js

  • このエントリーをはてなブックマークに追加

「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を使わない理由は無くなりましたね!

 - Google Map API, leaflet.js

  • このエントリーをはてなブックマークに追加

  関連記事

github_geojson_search
GithubからGeoJSONを検索して地図上に表示するページを作ってみました。

example Google Custom Search APIを使って、Git …

fusion
Fusion TablesとGoogle Mapの連動が革命的に便利になっていた。

誰でも、地図を使った情報配信が出来る時代に…… Fusion Tablesとは「 …

前橋市オープンデータ
前橋市のオープンデータを使ってカレンダー(サンプル)を作ってみた

example 年始の記事でこんなことを書きましたが、願いが通じたのか、群馬県前 …

Graphically Edit a Data Layer
Google Maps APIにGeoJSONを編集する機能が付いたので、サクッとGeoJSONエディタ作ってみた。

以前、Google Map上にGeoJSONを表示するデータレイヤーについてお伝 …

addrajxGmap
住所ドリルダウン検索(ADDRAjax)ライブラリとGoogle Maps APIをカリーで。

おいしいカリーのつくりかた勉強中。 Google Geocodeは住所を与えれば …

charlotte Maps
Charlotte(シャーロット)2話に出てきた地図のleaflet版作った。

地理院地図……お前、地理院地図じゃないか! というわけで、leaflet版作って …

室蘭市 選挙ポスター掲示場
室蘭市の地理情報付きオープンデータ(選挙ポスター掲示場)を使ってみた

example むろらんオープンデータライブラリにて、「選挙ポスター掲示場」とい …

Proj4js
Google Maps APIで緯度経度を元にプロットしたマーカーの位置がずれる(測地系変換)

某社のAPIから取得した物件データの緯度経度を元にGoogle Map上にプロッ …

googleMapsAPI
Google Maps APIのちょっとした進化

今まで、Google Maps APIで緯度経度を指定する際は、google.m …

大阪市 ひったくり事件発生個所
大阪市のオープンデータを使って、ひったくり事件発生個所を視覚化してみた。

以前、大阪都構想住民投票結果の地図を作った際に、大阪市のオープンデータの中に犯罪 …