Google Maps Platformより新しくAdvanced Markers Preview版が発表されました！

Maps JavaScript APIの新しいフィーチャーで、簡単にマーカーをカスタマイズできます。長年にわたる開発者からのリクエストに応える形でローンチしました。さらにより高速なパフォーマンスを実現しています。
これまでユーザーは地図上のマーカーの見た目のカスタマイズをする際には、独自にカスタマイズ向けのPNG画像を作成することでマーカーの色などを変更する必要がありましたが、Advanced MarkersではPNG画像を用意せずとも、色や大きさなどを変更することが可能になります。

中心・アウトライン・背景の色、大きさのカスタマイズ

直接画像で設定する以外にもSVGなどのベクターデータを用いたり、CSSなどでマーカーの枠線や塗りなどを指定して描画することもできます。これまでGoogleの赤いマーカーだけだった、という方もブランドロゴや作成した画像をマーカーとしてご利用いただけます。

SVGを使うと例えば、不動産業の方では売り出し中の物件価格をインタラクティブに表示いただけます。また、パフォーマンスも改善されているのでたくさんのマーカーを表示した地図をスクロール、ズームなどしてもスムーズなユーザー体験を提供いただけます。

CSSアニメーションを使ったSVG表示

これまではカスタムオーバーレイ 機能を利用して実装していたため、表示速度が遅く、メンテナンスに手間がかかり、マーカーの重なりの調整などが困難でした。カスタムHTML要素をご利用いただくことで、この問題を解消しています。
マーカーの重複については3つのオプション を提供しています。
ズームレベルに応じて、地図上に表示する情報の粒度をより細かく制御をすることが可能となり、視認性の向上などに繋げることが可能です。

＊1枚目：すべてのマーカー表示、2枚目：すべてのマーカーを表示＆ベースマップのラベルを一部非表示、
3枚目：マーカーを一部非表示＆重要度の低いベースマップのラベルを非表示

Advanced Markersではマーカーの高さ設定もできるので、3D俯瞰表示で示した地図の建物の上にマーカーを表示することもできます。

新しい機能Advanced Markersはいかがでしたか？
Advanced MarkersPreview版はMaps JavaScript APIのDynamic Mapsの最新機能として提供されています。
ぜひ、一度体験してみてください！

・Google公式ブログ
※こちらの投稿は、Google Cloud blog 及びGoogle Developers を一部引用・加工し作成しております。

Google Maps Platformは1つのサービス内にてユーザの希望する機能を選択しご利用いただくことができ、最新の機能をいち早くご利用いただくことができます。
国際航業はGoogle Maps Platformのプレミアパートナーとして、ライセンスのご提供の見ならずGoogle Maps Platformを活用したシステム構築にもご協力・ご提案が可能です。
Google Maps Platformについてのご相談・最新の情報については国際航業までお問い合わせください！！