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

おすすめの記事

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

Adblock対策プラグイン「End of Adblock Cycle」を作成しました

Adblock対策プラグイン「End of Adblock Cycle」を作成しました

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

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

ユーザーの環境変数を設定するbashの設定ファイルと、カスタムプロンプトについて

ユーザーの環境変数を設定するbashの設定ファイルと、カスタム…

開発の最前線でクリエイター・エンジニアに必要なプログラミング言語

開発の最前線でクリエイター・エンジニアに必要なプログラミン…

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

Apacheのmod_rewriteモジュールの使い方を徹底的に解説

Apacheのmod_rewriteモジュールの使い方を徹底的に解説

誤って削除したGoogle Chromeのブックマークを復元する方法

誤って削除したGoogle Chromeのブックマークを復元する方法


コメントを残す

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

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