地図を貼る前にGoogleマップの丸いピン

Question

こんにちは私は広範囲にグーグルを試みましたが、何も助けてくれないようです。

これは私のシナリオです：

1. 会社のロゴは、外部ドメイン/ URL（長方形で）上に格納されています。
2. これらのロゴをマーカーとしてマップに配置するGoogleマップを使用したイオンアプリケーション。

マーカーが醜いので、マップ上で丸くしたいです。

私はページ全体にCSSを追加すると言っていることを発見した：

img { border-radius: 50%; } 

は、その後、それは画像を丸めるだけでなく、マップの背景を丸めます。それぞれのロゴのURLが異なるため、CSSで画像のURLを指定することはできません。どのように私はjavascriptだけでこれを達成することができますか、どのように各マップピンにCSSクラスを割り当てることができますか？

編集：私は要素を検査すると、マップピンはキャンバスの一部であり、検査するために表示されないので、このような一般化されたCSSスタイルを追加しました。上記のように、私は直接それをターゲットにすることができるように、ピンにCSSクラスを割り当てるのが大好きです。

Answer 1

あなたがあなた自身の画像を使用して、カスタムマーカーを作成することができます。..

https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom

そして、ここで試してください：あなたが開始を取得する必要

https://m.youtube.com/watch?v=ZtNrt9vRt10 ...

Answer 2

@ MikeCaveの提案は素晴らしいです。私は特にこれが好きです。なぜなら、Googleマップは複数の解像度を制限しているので、高解像度のスクリーンではマーカーがよりよく表示されるからです。

このように、そのようなすべての画像に一般的なルールを適用する場合は、より具体的に説明する必要があります。 iframe imgを指定すると、Googleマップでiframeの中にマップを配置するので、より具体的に指定できます。より良いターゲティングのためにマーカーにクラス名を追加する方法については、this answerをご覧ください。

Answer 3

これをプラグインMarkerWithLabelで実現できました。次に、マーカーの下にラベルとしてイメージを配置することで、アイコンurlを空の文字列として定義し、イメージURLをラベルに配置することによってマーカーを隠すことができます。ラベルには、CSSを使用して操作できるCSSクラスがあります。