googlemapで表示している地図全体をグレースケールにして、位置情報ピンのみ色を付けたい。

Googleマップを下記のコードで表示しています。
位置を示すピンのみを、赤色で装飾したいのですが、そのようなことは可能でしょうか？
また、可能であれば、どのようにすればよいか教えていただきたいです。

HTML
1<iframe src="https://www.google.com/maps/d/embed?mid=1oWks2LnUMR5fIw43rJuAQ9Jcvi4&hl=ja" 
2　width="640" height="480">
3</iframe>

CSS
1iframe{
2　　-webkit-filter: grayscale(1);
3　　filter: grayscale(1);
4}

表示結果

よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

APIキーが要るけど Maps Static API の Styled Maps がそんなかんじです。

【Google Maps APIs Styling Wizard を使ってカスタマイズしたマップを使う｜ Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/html_css/post14880.html

【【Google Maps API】地図デザインの変更と「Styling Wizard」の使い方 | 株式会社グランフェアズ】
https://www.granfairs.com/blog/staff/google-maps-api-04

投稿2020/05/28 04:06

総合スコア69407

2020/05/28 04:17

Kei344さんありがとうございます。そちらのURLを参考に、自分で作成してみます！

2020/05/30 02:46

kei344さん昨日は、質問への回答ありがとうございました！提供していただいた情報をもとに、Google Maps APIを使用して解決することができました。ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問