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

中級編

クリックで読み込む

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

クリック

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

色をカスタムする

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

Styling Wizard: Google Maps APIs
Customize colors, roads, labels, and more. Then use your custom style in your Google Maps APIs project.

色をカスタムした様々なマップのギャラリーサイトです。

Snazzy Maps - Free Styles for Google Maps
Snazzy Maps is a repository of different color schemes for Google Maps aimed towards web designers and developers.

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

複数表示する

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

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

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

道を表示する

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

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

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

Mapkit.io
Google Map Making Simplified

しかし、このサービスは1ページ/1MAPを想定して作られているので、 同じページに複数の地図を配置したい場合は苦労します。
サクッと作りたい場合はオススメです!

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

【Google Maps API】よく使うカスタム事例のまとめ。1/3
Google Mapsを最強にカスタマイズ 案件でGoogle Mapをよく使うんですが、カスタムされたデザインのMapのコーディングは 少し時間がかかり、いつも理想通りの地図が作れず90%くらいで妥協してしまうことが多いです。この記事...
【Google Maps API】よく使うカスタム事例のまとめ。3/3
上級編 ルートを辿るアニメーションを付与(直線) ルートを表示するマップにアニメーションを追加します。 任意の地点を直線で結ぶので、近場のルートを示すのにおすすめです。 DirectionsServiceで得られるル...

コメント