【Google Maps API】よく使うカスタム事例のまとめ。2/3

中級編

クリックで読み込む

loadイベントでなく、クリックで読み込むようにしましょう。
クリックで読み込んだ後に落ちてくるanimationを付けます。

クリック

クリックイベントだけではなく、あるスクロール位置に来た時に表示してみたり、いろんなパターンが考えられます。

色をカスタムする

以下のサイトでオリジナルの色のマップを作ることができます。

色をカスタムした様々なマップのギャラリーサイトです。
https://snazzymaps.com/explore

見やすくはないですが、個性的なサイトを作りたい場合は必須のカスタマイズですね。

複数表示する

変数名が被らないようにプログラムを作成する必要があります。
また、複数のマーカーがあるので地図の中心座標とマーカーの座標は違う値になります。

以前作成した久米島のMy Mapsと見比べてみてください。
マーカーをクリックすることでその場所の情報、写真を見ることができます。
複数マーカーを立てるだけの場合はMy Mapsのほうが良さそうですね。

【一番きれいな海】久米島のはての浜へ行ってきた
はての浜きれいすぎる・・・ 海、砂浜、魚達どれも完璧でした。 ここより素晴らしい海を知っていたら是非教えてください。 10数年前に行っ...

道を表示する

関西国際空港から沖縄を経由し、久米島までのルートを表示します。

分かりやすいルートマップを作成することで、〜〜駅から徒歩〜分のようなテキストにスペースを割く必要がなくなりますね。

ここまでのカスタムは以下のサイトで簡単に作ることができます。

Build and populate your own Google Map to your website with just a few simple clicks. It's Google Maps — Simplified
しかし、このサービスは1ページ/1MAPを想定して作られているので、 同じページに複数の地図を配置したい場合は苦労します。
サクッと作りたい場合はオススメです!

今回このページで使ったjsファイルです。ご自由にお使いください。
1947.js

【Google Maps API】よく使うカスタム事例のまとめ。1/3
Google Mapsを最強にカスタマイズ 案件でGoogle Mapをよく使うんですが、カスタムされたデザインのMapのコーディングは ...
【Google Maps API】よく使うカスタム事例のまとめ。3/3
上級編 ルートを辿るアニメーションを付与(直線) ルートを表示するマップにアニメーションを追加します。 任意の地点を直線で結ぶので、近...
スポンサーリンク
RESAD
RESAD

シェアする

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

フォローする

スポンサーリンク
RESAD