GoogleMapsAPI v3のマーカーにマテリアルデザインのアイコンを使う + 色や形を変更する方法

GoogleMapsAPI v3のマーカーにアイコンを使う + 色や形を変更する方法

Google マイマップには用意されたアイコンの中から好きな形と色を選んでマーカーに設定する機能があります。

これ、どうやって実現してるのかなと思い調べてみるとサーバーサイドでアイコン画像を生成し都度配信しているようです。

真似して作ろうと思ってもわざわざサーバー側で実装するのは面倒ですね。できればフロント側でいじって変えたいです。

GoogleMapsAPIのマーカーには、Symbolを設定できます。Symbolを使えばSVGのパスをマーカーのアイコンに設定でき、色や形を自由に変えることができます。

ただし、指定できるパスはワンライナーである必要があり、一通りのアイコンを揃えるのは大変ですよね。

そこでMaterial Design IconをGoogleMapsAPI
で使えるように最適化したライブラリを作成しnpmで公開したので、使用方法を紹介します。

インストール

npm i mdi-paths

ライセンスはオリジナルを継承してApache License, Version 2.0です。

使用方法

使いたいアイコンをこちらから探し、名前を指定してインポートしてください。
ただし、数字から始まるアイコン名はアンダーバーを先頭に付けてください。またJavaScriptの予約語になっている名前は最後にアンダーバーをつけてください。

import {library_books} from 'mdi-paths'

const marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0, 0),
    icon: {
        fillColor: '#FFFFFF',
        fillOpacity: 1,
        path: library_books,
        strokeColor: '#000000',
        strokeWeight: 2,
    },
})

// 数字から始まるアイコン名
import {_3d_rotation} from 'mdi-paths'
 
// JSの予約語であるアイコン名
import {delete_} from 'mdi-paths'

まとめて全てインポートすることもできます。

import mdi_paths from 'mdi-paths'
// --------中略---------
         path: mdi_paths.library_books,
// --------中略---------

スタイルを変更する

const symbol = {
    fillColor: '#FFFFFF',
    fillOpacity: 1,
    path: library_books,
    strokeColor: '#000000',
    strokeWeight: 2,
}

const marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0, 0),
    icon: symbol,
})

// 赤色に変更
marker.setIcon({...symbol, fillColor: '#FF0000'})

詳しくはGoogleMapsAPIのドキュメントを参照してください。

まとめ

有名なマテリアルデザインのアイコンが使えるだけでなく、フロント側だけでアイコンの形や色を自由に変えられるので便利です。