Google Mapのマーカーを好きな画像にして角丸にする【1日10行コーディング】

概要

1日10行コーディングとは

まず、1日10行コーディングというのは、1日10行でいいから新しいコード書こうよって感じのやつです(雑)
(1日1記事とか1機能とかだと続かない気がしてしまってる...)

実装するもの

最終的に作りたいのは自分でピンを立てた店のアイコンとかを自由に変えられたり、カテゴリごとにアイコン変えたりとかするものが作りたいという気持ち。Google Map my place??とかいうのに近いというか多分おんなじようなのになると思う。

ただ、今日はその前の前の前の前段階くらいのマップのマーカーを変更するところをしたいと思います。

手順

1.マーカーの変更

下記のiconの部分で写真の設定をできます。

const marker = new google.maps.Marker({
    position: uluru,
    map: map,
    icon: {
        url: 'niku.jpg',                      //アイコンのURL
        scaledSize: new google.maps.Size(40, 40) //サイズ
    }
});

2.マーカーを丸くしたい

まぁ画像自体を丸く加工しろよって意見もあると思うんですけど、写真の加工とかいちいちしたくないので...

Google Map　APIのスタイルではできないみたいで、いくつか文献を見てみたところマーカー自体にcssでスタイルを適応するやり方があるみたいでそれを試しました。

1. 脳死でやってみた

ディベロッパーツールで見てみたらimg要素でアイコンが設定されてたので

img{
    border-radius: 50%;
}

って書いてみた。

色々まるくなっちゃった...笑

2. ちゃんとマーカーにセレクタを設定

じゃあ、セレクタちゃんと設定すればいいじゃんって思ったんだけど、簡単には行かないみたい...
https://stackoverflow.com/questions/22047466/how-to-add-css-class-to-a-googlemaps-marker
探ってみると、名前の一致とかでやってる人が多いみたい..(嘘だろ？？)
まぁ、別に自分はできればいいのでその方法を採用

3. 独自の名前設定

さっきのマーカーロジックをちょっと修正

const marker = new google.maps.Marker({
    position: uluru,
    map: map,
    className: "ssss",  
    icon: {
        url: './img/niku.jpg',//アイコンのURL
        scaledSize: new google.maps.Size(40, 40), //サイズ
    }
});

画像用にファイルパスを切って、定義する。

そしてCSSで下記のように定義

img[src*="/img/"]{
    border-radius: 50%;
}

名前でファイルパスにimgがあるものに対してスタイルを適応するように修正。

とりあえずやりたいことはできた。
けど、これここまで微妙な実装しなきゃいけないってことは画像自体を丸くするとかがいいんだろうなと思いました。