Информационное окно Google Maps выглядит испорченным

Question

Проверьте этот сайт и нажмите на маркер на карте.Вы можете видеть, что информационное окно облажалось, глядя.Граница очень неровная и не сплошная.Как я могу это исправить и что это вызывает?http://waterski.allthingswebdesign.com/index.php/site/directions

Answer 1

Это немного поздний ответ, но я исправил это с помощью:

#map img {
   max-width: none;
}

Answer 2

Проблема скрывается внутри вашего CSS, который перезаписывает Google. У вас есть несколько способов исправить это:

• поместить карту в iframe без CSS
• уточните правила CSS (например, не используйте правила для простых тегов div, h1 и других тегов
• создайте свой собственный стиль для пузыря

Самый простой путь, конечно, к первому.

Обновление: Ифрейм - это фрейм, который находится внутри страницы. Таким образом, вам нужно создать еще один .html файл только с картой Google и без ваших CSS-файлов. Тогда ваш iframe будет выглядеть так:

<iframe src="map.html" width="100%" height="300"><p>Please upgrade your browser for Iframe support</p></iframe>

Answer 3

Я использую html5reset , и если вы посмотрите в файл reset.css, он имеет следующие строки, которые вызывают проблему с Google Maps.Там даже есть описание, в котором говорится, что это вызывает проблемы с картами Google.

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
   There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {max-width: 100%;}

Answer 4

попробуйте удалить код сброса css и проверьте, исправляет ли это

Answer 5

У меня была такая же проблема: когда мой InfoWindow появился, он был искажен: Исправление: Я закомментировал google-button.css со страницы.

<!--<link rel="stylesheet" href="google-buttons.css" type="text/css"  media="screen" />-->

Собственная кнопка Google помешала CSS их карт.