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で表組みデザイン

おすすめの記事

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

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

Windows 10でネットワークが不安定になった際の対策まとめ

Windows 10でネットワークが不安定になった際の対策まとめ

初心者でも安全なLAMP環境を構築する方法を解説

初心者でも安全なLAMP環境を構築する方法を解説

全く新しい決済サービスPayPal.Meの導入と使い方を解説

全く新しい決済サービスPayPal.Meの導入と使い方を解説

NexusFontが重い場合はWindows Font Cache Serviceを無効にしよう

NexusFontが重い場合はWindows Font Cache Serviceを無効にしよう

インストールだけじゃない!yumの設定から便利な使い方まで徹底的に解説

インストールだけじゃない!yumの設定から便利な使い方まで徹底…

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

DELL Inspiron 3250のHDDをSSDへ換装して、メモリを16GBへ増設

Windows 10を32bit版から64bit版に変更する方法

Windows 10を32bit版から64bit版に変更する方法


コメントを残す

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

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