Webサイト制作で地図コンテンツを配置することも、少なくない。というよりコーポレートサイトには欠かせない要素のひとつといえる。そしてそのほとんどがGoogleマップで、お客様におかれてもGoogleマップ以外の選択すら考えていないほど確実にである。 私は、モックアップ作成時に地図コンテンツ配置が要求された場合、往々にしてGoogleマップのキャプチャを用いるわけだが、この工程を煩わしく感じてしまう。ブラウザでGoogleマップを開き、該当プレイスを表示する。大きめにキャプチャして、対象オブジェクトにクリッピングマスクをかける。そして表示位置を調整する。面倒くさい。 工程を増やすことで研ぎ澄ましていく類のものと違い、制作の現場では可能な限り無駄を省かなければならない。とはいえもちろん省くなかにも、見極めが大切だと考えている。 たとえば、デザイン装飾のクオリティを上げる工程は重要なことであり、省いてはならない。その一方で、画像を書き出す作業は、省略できそうなものだ。 この違いには、なにがあるのだろうか？ 私の理解では「ゴールが見えていて、そこまでの過程が面倒だと感じるか否か」であるが、あなたなりの理解でこのエントリーを読み進めていただけると幸いだ。 さてGoogleマップをアートボード上に表示する作業は、間違いなく省きたい作業に該当する。あなたがAdobe XDで作業しているならば、この工程を省略できるプラグイン「Maps generator」を紹介したい。使えるかどうか検討してみてほしい。 Maps generator プラグインについて Maps generatorは、Adobe XDアートボード上にGoogleマップを表示する効率UPを図れるプラグインだ。このプラグインは、Google Maps APIを使用して地図を生成している。したがって、Webブラウザに表示する場合と遜色がないはずだ。 特徴 地名、または緯度経度を入力するだけで取得できる マップタイプやズーム値を変えられる ロケーションピンの有無を選べる 使い方 Maps generatorは、ダイアログを操作して使うタイプのプラグインとなっている。まずはMaps generatorプラグインをインストールしてもらいたい。その手順はとても簡単だ。 インストール インストールの手順を示していこう。まずはAdobe XDのツールバー「プラグイン」>「プラグインを見つける…」をクリックしてほしい。 果たして、つぎのモーダルウインドウが開く。モーダルウインドウからプラグイン検索を行おう。入力フォームに「maps generator」と入力する。すると対象プラグインの「Maps generator」が表示されるはずだ。インストールボタンをクリックして完了させよう。 マップを表示する まずはアートボード上に、マップ表示用のオブジェクトを配置する。 オブジェクトがアクティブな状態で、ツールバー「プラグイン」に「Maps generator」が表示されていることを確認できたらクリックしよう。 果たして、つぎのダイアログが開く。ダイアログには、 Location Zoom Level Map Type Location Pin Enter Styles json の設定項目が設けられている。Locationに目的地、あるいは緯度経度を入力。Zoom Levelでズーム値を変更。Map Typeで地図の種類を選択。Location Pinでピンの有無を切り替え。Enter Styles jsonでマップに装飾を与える。設定が決まったら「Generate Map」ボタンをクリックする。 果たして、Googleマップが表示される。ご覧のとおりオブジェクトぴったりにGoogleマップが配置されてるのがわかると思う。 これにてMaps…