Google Map APIでカスタムアイコンが表示されない不具合


投稿日:2015年1月29日
  • 2
  • 0



なぜかGoogle Chromeでだけカスタムアイコンが表示されない…

googlemap_custompin

アクアリウムWiki Mapではサムネのようにカスタムアイコンを採用していました。

しかしある日から突然Chromeで閲覧した時のみ、アイコンが表示されなくなりました。InternetExplorerやFirefoxでは問題なく表示できているので、原因がなかなか分かりませんでした。

googlemap_custompin01

原因とカスタムアイコンを表示する方法

原因はレスポンシブデザインに変更するにあたって変更した以下の指定でした。

img {
	max-width: 100%;
}

なぜかこの指定があるとChromeでだけ画像が表示されません。そこで以下の指定も追加しました。

.gm-style img {
	max-width: none;
}

すると無事にChromeでもカスタムアイコンを表示することができました。

googlemap_custompin02

現在のページを共有する



現在のページに関連する記事

Google Map APIでカスタムアイコンが表示されない不具合 PukiWikiにgooglemaps3を導入して、Google MAPを表示する方法
Google Map APIでカスタムアイコンが表示されない不具合 初めてでも理解できるようになる「Google Chrome機能拡張の開発」
Google Map APIでカスタムアイコンが表示されない不具合 デベロッパー登録してChromeストアに機能拡張を公開する方法
Google Map APIでカスタムアイコンが表示されない不具合 Google Chromeで戻るボタンを押しても元のページに戻れない場合の対処法
Google Map APIでカスタムアイコンが表示されない不具合 Google ウェブストアでNETWORK_FAILEDエラーが出たときの対処法
Google Map APIでカスタムアイコンが表示されない不具合 Excelの住所録を使ってGoogleMapのマイマップを制作する方法
PukiWikiで表組みデザイン PukiWikiで表組みデザイン

おすすめの記事

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

サーバリソースをリアルタイムに監視するdstatのインストールと使い方

サーバリソースをリアルタイムに監視するdstatのインストールと…

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザイン…

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集…

fluentdとNorikraでDoS攻撃を遮断し、メールで通知する方法

fluentdとNorikraでDoS攻撃を遮断し、メールで通知する方法

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポンシブイメージの基本

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポン…

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

サーバで管理していたWordPressをローカル環境に移行する方法

サーバで管理していたWordPressをローカル環境に移行する方法


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。