MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.10.28

GoogleマップにFusion Tablesを使ってマーカーを7万個描画する

Fusion Tables を使ってマーカーを描画する

みなさん、こんにちは。

今回は、Google  Fusion Tables にデータを登録し、Google Maps JavaScript API でマーカーを描画してみたいと思います。

 

ちなみに、みなさんは Fusion Tables をご存知でしょうか?

簡単にいうと Google が提供する位置情報付きのデータストア(データベース)のことです。以下のブログが参考になります。

https://qiita.com/U11/items/f37cfdaa4fe452946f46

 

なお、Fusion Tables に登録したデータは、Google Maps API や Google Charts API などから利用できます。

 

 

では、早速試していきましょう。

まず、Fusion Tables にデータを登録する必要があります。当然のことながら、Google のアカウントが必要ですので、ご用意ください。Google アカウントでログイン後、Google ストレージにアクセスします。左上の新規ボタンより、その他→アプリを追加を選択してください。

FusionTable01

 

 

検索テキストボックスに Fusion と入力し、検索を実行すると「Fusion Tables(試験運用)」が表示されますので、接続ボタンをクリックしアプリを追加してください。

FusionTable02

 

 

これで、Fusion Tables を使えるようになりました。

次にデータを作成するのですが、今回は、緯度経度が含まれたCSVファイルを使用して作成します。新規ボタンクをクリックし、その他→Google Fusion Tables を選択します。

FusionTable04

 

 

ファイルを選択ボタンをクリックし、CSVファイルを選択します。区切り文字、文字コードを設定し、Next ボタンをクリックします。文字コードはあらかじめ、UTF-8にしておくほうが良さそうです。

FusionTable05

 

 

CSVファイルがインポートされました。Next ボタンをクリックします。

FusionTable06

 

 

最後に Table name を入力し、Finish ボタンをクリクします。

FusionTable07

 

 

CSVファイルを読み込んだ結果の一覧です。

次に緯度経度を Location と認識させる必要があるため、wgslat ヘッダを選択し、Change をクリックします。

FusionTable08

 

 

「type」を Location に変更し、「Two column location」をチェックします。緯度、経度の列をそれぞれ設定し、Save ボタンをクリックしてください。これで設定は完了です。

FusionTable09

 

 

Fusion Tables 上でも地図を表示しマーカーを描画することができます。「赤い +」の部分 を開き、Add map をクリックします。

FusionTable10

 

 

新しい「Map 1」というタブが作成されますので、開くと以下のように地図が表示されました。

FusionTable11

 

 

では、ここから本題の Google Maps JavaScript API を使用して、作成した Fusion Tables のデータを描画してみたいと思います。

Google Maps JavaScript API  で利用するためには、先程作成したデータを公開設定する必要があります。右上の Share ボタンをクリックし、「ウェブ上で一般公開」または「リンクを知っている全員」に設定してください。

FusionTable12

 

 

 

また、JavaScript API 上で使用するテーブル名を取得する必要があります。メニューの Tools を開き Publish を選択します。「Paste HTML to embed in website」テキストボックス内にSQL文が書かれているので、select … from 以降のテーブル名をメモしておいてください。

FusionTable13

 

 

コード自体は非常に簡単です。FusionTablesLayer を利用してレイヤを作成し、mapオブジェクトに追加するだけです。

var map = new google.maps.Map(document.getElementById("map"), {
	zoom : 10,
	center: new google.maps.LatLng(35.693395,139.758646)r,
	mayTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
	query: {
		select: '\'*\'', //フィールド名
		from: 'xxxxxxxxxxxxxxxxxxxxxxxx' //テーブル名
	},
	styles: [{
		markerOptions: {
			iconName: "small_red"
		}
	},{
		where: "category >= 0 and category <= 3",
		markerOptions: {
			iconName: "small_red"
		}
	}, {
		where: "category >= 4 and category <= 6",
		markerOptions: {
			iconName: "small_blue"
		}
	}, {
		where: "category >= 7 and category <= 9",
		markerOptions: {
			iconName: "small_green"
		}
	}]
});
layer.setMap(map);

 

query プロパティで取得するデータのSQLを定義します。

styles プロパティを利用すれば、マーカーの種類を変更できます。今回は、category フィールドの値によって、マーカーを変更しています。

 

なお、設定できるマーカーの種類は、以下のサイトに表示されているマーカーのみ利用可能なようです。

https://fusiontables.google.com/DataSource?docid=1BDnT5U1Spyaes0Nj3DXciJKa_tuu7CzNRXWdVA#map:id=3

 

 

 

以下、実際のデモサイトです。マーカーは、約70,000個あります。マーカーをクリックすると、吹き出しも表示されます。

Full Screen

 

 

Fusion Tables を使ってみての感想です。

良い点

・非常に多くのマーカーを高速に描画することができる。Fusion Tables の場合、マーカーを Google のサーバーサイトで描画し、タイル画像として配信しているため、高速な処理が実現できているようです。

 

気になる点

・独自のマーカーを利用できない。

・データを公開しないといけない。

・カスタマイズ性が低い。

 

いかがでしょうか?

用途に合えば、これだけ多くのマーカーを高速に描画できるため、利用する価値はあるかなと思いました。ちなみに、一般的な形でマーカーを7万個描画すると、PCのスペックにもよりますが、PCが固まる、時間がかかる、ブラウザが重くなる、など色々な問題が発生します。

 

 

マルティスープでは、このような問題を解決するため日々研究を重ねています。用途に合わせて、色々な提案をご用意していますので、お気軽に問い合わせください。

 

 

バイ!

 

 

【関連記事】こんな記事も読まれています

2017.05.26

日光いろは坂で「Roads API」を使ってみたら・・・

みなさん、こんにちは。

先日開催した「Google Maps 活用セミナー」には、多数のご来場ありがとうございました。

 ・・・

続きを読む

2017.06.24

ジオメトリライブラリを使って距離や面積を算出する

みなさん、こんにちは。
Google Maps JavaScript API を使用して2点間の距離やエリアの面積を計算する方法をご存知ですか・・・

続きを読む

2016.06.22

山梨県立富士山世界遺産センター公式アプリ「ふじめぐり」

みなさん こんにちは!

本日(6/22)、山梨県立富士山世界遺産センターが開館しました!

今回は富士山世界遺産センターと「・・・

続きを読む

 - Google Maps APIs, Google Maps JavaScript API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)