ページにスタイリッシュな地図を追加してインタラクティブな体験を実現

執筆者:

カテゴリ:

Adding-Stylish-Maps-to-your-Page-is-an-Interactive-Experience-2Page Builder Sandwichを使って、ページデザイン内に地図を配置できるようになりました!

地図の機能にワクワクするなんて少し不思議に思えるかもしれません。通常ならGoogleマップのURLをコピーして埋め込むか、オンラインで地図プラグインを探してショートコードを貼り付けるだけです。あるいは、すでにお使いの他のページビルダーにも機能があり、いつでも追加できるかもしれません。しかし、私たちがワクワクしている理由は、地図の追加方法をまったく新しいレベルへと引き上げたからです。

プレビューはこちらです:

従来の退屈な地図追加方法

一般的なページビルダーで地図を追加する手順は以下の通りです:

  1. 新しいマップ要素をドラッグする、
  2. フィールドに緯度と経度を入力する、
  3. マップの高さや幅などの値を入力し、道路スタイルのチェックボックスをオンにするなど、
  4. プレビューをクリックして表示を確認し、もっと見栄えを良くするために修正が必要だと判断する、
  5. ページビルダーに戻って値を変更し、上記のステップ4を繰り返す。

Page Builder Sandwichでの地図追加方法

ウェブサイト上の地図はインタラクティブであり、パン移動したり、拡大・縮小したりできます。それなら、あて推量をすべて排除して、ページの作成中に直接地図を操作できるようにすればいいのではないかと考えました。

Page Builder Sandwichで地図を追加する方法は次の通りです:

  1. マップ要素を追加する、
  2. 地図の中心にしたい場所の緯度・経度、または住所を入力する、
  3. 地図を自由に動かしたり拡大・縮小したりして、希望通りの見栄えにする、
  4. スタイルに合わせて地図にかっこいい色を追加する、
  5. 保存をクリックする。

私たちの方法は、はるかに楽しく直感的です。通常のGoogleマップと同じように地図を直接操作できます。

カラーマップ、またはSnazzyMapsでスタイリング

私たちが搭載した素晴らしい機能の一つは、地図に色味やカラーを付けられることで、操作もとても簡単です(※プレミアム版のみの機能です)。地図を着色したい場合は、カラーピッカーをクリックして色を選ぶだけで、地図が即座に変化します。

こちらはピンク色に着色した例です:

Page Builder Sandwichは、SnazzyMapsを経由した、より精巧なカラースキームにも対応しています。ユーザーから投稿された膨大なカラースキームのリストが用意されており、色をより細かくコントロールしたい場合は独自のカラースキームを作成することもできます。

お好みのカラースキームを見つけたら、コードをコピーしてPage Builder Sandwichに貼り付けるだけです。カラースキームがすぐに地図に適用されます。

こちらはSnazzyMapsのpapuportal dark:

好きな場所に地図を配置

全幅の行に追加してよりドラマチックな効果を出したりと、地図を使ってできる魅力的なことはまだまだたくさんあります。お好みでカルーセル内に追加したり、タブ内に追加したりすることも可能です(近日公開予定の機能)。

まだPage Builder Sandwichをお持ちでない場合は、上の「Live Demo」リンク.