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


投稿日:2015年1月29日
  • 1
  • 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で表組みデザイン

おすすめの記事

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

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

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

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

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデ…

Excelでセルとセルの間をダブルクリックすると移動する機能を停止する方法

Excelでセルとセルの間をダブルクリックすると移動する機能を停…

WordPressの新・旧ループからカスタムクエリ・アーカイブまで徹底解説

WordPressの新・旧ループからカスタムクエリ・アーカイブまで徹…

rsyslogを利用したログファイル作成と、logrotateを利用したログのローテーション

rsyslogを利用したログファイル作成と、logrotateを利用したロ…

本気で作りたい人向け、WordPressプラグインの作成方法

本気で作りたい人向け、WordPressプラグインの作成方法

Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法

Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する…


コメントを残す

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

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