こんにちは。
開発本部 SJC共同開発推進室の中野です。
Webフロントエンドで地図を実装する際、多くの開発者が最初に頭に浮かべるのは「Google Maps API」だと思います。
Google Maps API には、地図表示だけでなく、非常に強力な機能が備わっています。
その中でも特に注目すべき機能──それは 2023年5月にリリースされた 「高度なマーカー」です。
通常の地図マーカーでは表現不可能だった、より豊富な情報を表示できるこの機能は、一度使うと病みつきになること間違いなしだと思います。
今回の記事では、Google Maps APIの「高度なマーカー」をReactでどのように実装するかに焦点を当て、その魅力をご紹介します。
高度なマーカーでできること
「高度なマーカー」の機能を活用することで、非常にカスタマイズ性の高いマーカーを手軽に作成できます。この機能の特長として、以下が挙げられます。
- マーカーの背景色、輪郭線の色、グリフの色、サイズがカスタマイズ可能
- マーカーをSVGやPNG形式等の一般的な拡張子のカスタム画像に変更可能
- DOMクリックイベントやキーボード入力に反応できる
- カスタムHTML および CSS を活用してより高度なカスタマイズが可能
- 3D 地図要素に合わせて正しく表示されるよう、マーカーの表示高度を設定可能
凄いですよね？
バリエーションごとに画像を作成しなくてもマーカーをカスタマイズできるので開発者の工数がかなり減ると思います。
通常のマーカーでは難しかったり、大変だったりした実装が、手軽にできるのは有難いですよね！
しかも読み込み時間が従来のマーカーより短縮されているとかなんとか…
React×GoogleMapsAPI
動作環境は React を Docker で立ち上げています。
環境構築から始める場合は、Googleで検索していただくと非常にわかりやすい記事が既に出回っているので、そちらを参考に準備をお願いします。
@googlemaps/react-wrapperというライブラリを利用します。Reactで地図を表示してみる
マーカーを試すための下地として、Reactでまずは普通の地図を表示しましょう。
そのために Mapコンポーネントを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import { useEffect, useRef, useState } from 'react'; import { Wrapper } from '@googlemaps/react-wrapper'; const mapOptions: google.maps.MapOptions = { mapId: GOOGLE_MAP_ID, center: { lat: 43.063122, lng: 141.357153 }, zoom: 16 }; function MyMap() { const [map, setMap] = useState<google.maps.Map | null>(null); const ref = useRef<HTMLDivElement>(null); useEffect(() => { if (ref.current) { setMap(new window.google.maps.Map(ref.current, mapOptions)); } }, []); return <div ref={ref} style={{ width: '100%', height: '100%' }} />; } function Map() { return ( <> <Wrapper apiKey={GOOGLE_MAP_API_KEY} version="beta" // ここと libraries={['marker']} // ここが重要！！！ > <MyMap /> </Wrapper> </> ); } |
これがないと、後で高度なマーカーの使用ができなくなります。
↓ 無事に地図が表示されましたね！（地図の中心を弊社の位置にしてみました）次はここにマーカーを入れてみましょう。
高度なマーカーを利用してマーカーを作成してみる
新たに Marker コンポーネントを作成します。
先程作成した MyMap コンポーネントの children として Marker コンポーネントを渡してあげると地図上ににマーカーが追加されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
// ここから function Marker({ map }) { const [_, setMarker] = useState<google.maps.Marker>(); const markerRef = useRef<google.maps.Marker>(); const createMarker = () => { const pinView = new google.maps.marker.PinView({ borderColor: 'red', background: 'red', glyphColor: 'white' }); markerRef.current = new google.maps.marker.AdvancedMarkerView({ map, position: { lat: 43.063122, lng: 141.357153 }, content: pinView.element }); return markerRef.current; }; useEffect(() => { const initialMarker = createMarker(); setMarker(initialMarker); return () => { if (markerRef.current) { markerRef.current.setMap(null); } }; }, [map]); return null; } // ここまで追記 function MyMap() { const [map, setMap] = useState<google.maps.Map | null>(null); const ref = useRef<HTMLDivElement>(null); useEffect(() => { if (ref.current) { setMap(new window.google.maps.Map(ref.current, mapOptions)); } }, []); // ここを差し替える // return ; return ( <div className="g-map" ref={ref}> <Marker map={map} /> </div> ); } |
グリフの色を変更するのであれば PinView.glyphColor オプションを使用するだけ。
スケール（マーカーサイズ）もオプションとして使用することができます。
初めて実装したときは簡単すぎて拍子抜けしました。
GoogleMapでよく見るピンと比較してみました。
よく見るピンと少しデザインが違うのが分かると思います。
あれ、あまり目立ちませんね。。。
折角なので色を変えて大きくしてみましょう！
かなり目立ってますね。。。
変更したのはこの部分だけ！手軽にカスタマイズできることをご理解いただけたと思います。
|
1 2 3 4 5 6 |
const pinView = new google.maps.marker.PinView({ borderColor: '#ff00ff', background: '#ff00ff', glyphColor: 'white', scale: 5 }); |
終わりに
Reactでの高度なマーカーの実装方法をご紹介しました。
「高度なマーカー」を使用することでカスタマイズの幅が非常に広がります。
活用次第では、ユーザー体験も向上すること間違いなしだと思います。
最近リリースされたばかりの高度なマーカーは、情報が多く出回っていないので少しでも参考になれば嬉しいです。
ライブラリの基本的な使い方は省略させていただきましたが、こちらの記事に地図の表示から通常のマーカーの生成までチュートリアル形式で載ってますので初めての方はご覧ください。
