Google Mapsは大変便利ですよね。Google Cloud PlatformでAPIキーを生成すれば、Webサイトにも自由なサイズで埋め込みすることが可能です。

ですが、時折カラーをカスタマイズされたGoogle Mapsを見かけませんか?今日は、Google Mapsをクールにカスタマイズできる便利なWebツールをご紹介します。

スポンサーリンク




目次

  1. Snazzy Mapsとは?
  2. Snazzy Mapsの使い方
  3. まとめ

1.Snazzy Mapsとは?

まずはSnazzy Mapsにアクセスしてみましょう。アクセスするとこのようなインターフェースとなっています。

このサイトは、カスタマイズされたGoogle Mapsをユーザー同士で投稿するサイトです。気に入ったマップを自身のサイトで使用することもできますし、自分でオリジナルのマップを作成してシェアすることもできます。クールでカラフルなGoogle Mapsのカスタマイズマップを作成するのに大変便利なサイトです。

閲覧するだけならアカウントは必要ありませんが、オリジナルのカスタマイズマップを作成したいなら、是非ともアカウントを作りましょう。画面右上の「Register」からアカウントを作成することができます。

名前(ニックネーム)、メールアドレス、パスワードを入力すれば誰でも簡単に登録できます。

2.Snazzy Mapsの使い方

他のユーザーがデザインしたマップを検索して使う

では早速、使い方を見ていきましょう。まずは「EXPLORE STYLES」をクリックして他のユーザーが投稿したカラフルなマップを見てみましょう。気に入ったマップがあれば、マップカラム右下の「」をクリックして「」にしておくと、メニューバー上の「FAVORITES」に保存しておくことができます。

もちろん、そのままのデザインでよければ、そのマップを自分の管理するWebサイトのGoogle Mapsとして使うことができます。

気に入ったマップの詳細画面に行ってから画面左側の最下部にある「Need a bit more help? Download a simple example」をクリックすると、html一式をダウンロードすることができます。表示サイズ、緯度経度、マーカー画像をカスタマイズするだけでそのまま使用できますよ。

※ 使用するには、「Google Cloud Platform」で生成されたAPIキーが必要になります。

自分のオリジナルマップをデザインする

では次に、自分のオリジナルマップの作成方法について扱ってみたいと思います。メニューバーの「CREATE A STYLE」をクリックしてみましょう。

まず、左側のテンプレートを選択します。

デフォルトに近い状態から作成するには「Default」をクリック。明度の高いマップを作りたいなら「Light」をクリック。明度の低いダークな感じのマップを作りないなら「Dark」。モノクロのマップを作りたいなら「Monochrome」をクリック。手持ちのJSONからカスタマイズしたいなら「JSON Import」をクリックします。

「Light」と「Dark」は最初に基本カラーを選択してから作成に入ります。「JSON Import」から作る人はJSONコードを用意してください。

テンプレートが決まったら「APPLY STYLE」をクリックして作成を開始しましょう。

カスタマイズの大まか流れですが、まず左上の「FEATURES」から地図上の各項目を選択して、それぞれの「ELEMENTS」と「STYLES」を決めていくというのが大まかな流れです。例えば「一般道路」の色をカスタマイズしたいとしましょう。その場合は「Rood」の「Local」を選択して、その「ELEMENTS」と「STYLES」をカスタマイズすると行った感じです。

「FEATURES」の地図上の項目ですが、高校レベルの英語力があれば、ほぼほぼ理解できるはずです。画面の各要素の操作パネルの意味は上記の画面を参照してみてください。

思いの通りのデザインにカスタマイズするには、多少の慣れが必要ですが、自分の制作するサイトのカラーにぴったりのマップがGUIで直感的にデザインできるなんて素敵ですよね!

デザインが完了したら、画面中央のフロッピーディスク・アイコンの「Save」をクリックして保存しましょう。

保存したら、メニューバー上の「MY STYLES」に保存されます。他のユーザーの閲覧数やお気に入り登録数が分かるのもうれしいですよね。

まとめ

今日は、Google Mapsをクールに、そしてカラフルにカスタマイズできるSnazzy Mapsを紹介しました。自分がデザインするWebサイトにぴったりのカラーのGoogle MapsをGUI環境で手軽にカスタマイズできる便利なサイトです。是非とも活用しましょう!