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

おすすめの記事

SNSのカウントをキャッシュするWordPressのプラグインを作成しました

SNSのカウントをキャッシュするWordPressのプラグインを作成し…

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

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

fluentdと連動して集計処理を行うNorikraの導入方法

fluentdと連動して集計処理を行うNorikraの導入方法

PukiWikiで5段階評価を付けるプラグインを作成しました

PukiWikiで5段階評価を付けるプラグインを作成しました

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

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

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表示する方法

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表…

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を作成しました

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を…

初めてでも理解できるようになる「Firefox機能拡張の開発」

初めてでも理解できるようになる「Firefox機能拡張の開発」


コメントを残す

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

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