В браузерах webkit карты Google версии 3 не учитывают радиус границы контейнера. У кого-нибудь есть обходной путь?
У меня есть две карты Google. Первый создается с помощью API Карт Google (v3) и содержится в # map1. Второй отображается в iframe с использованием предложенного синтаксиса встраивания от Google и содержится в # map2.
Вот скрипка:http://jsfiddle.net/wmcmeans/mPGWx/7/
Вот фрагменты:
<div id="map1" class="gmap left bling"></div>
<iframe id="map2" class="gmap right bling" height="425" width="550" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&q=augsburg+germany&ie=UTF8&hq=&hnear=Augsburg,+Bavarian+Swabia,+Bavaria,+Germany&t=h&ll=48.451123,10.862346&spn=0.004981,0.00912&z=16&output=embed"></iframe>
Вот в чем проблема: Карты Google, созданные из API v3, не учитывают границы контейнера, к которому применен стиль границ границ, при просмотре в браузере на основе веб-набора. Метод iframed (embed) не показывает тот же недостаток.
Проверено хорошо:
FireFox v 19.0.2 (Windows 7)
FireFox v 32.0.3 (Windows 8.1)
IE9 v 9.0.8112 (Windows 7)
IE11 (Windows 8.1)
Не удалось:
Chrome v 25.0.1364.160 m / Safari (Win / 32) v 5.0.3 / Opera v 11.64 (Windows 7)
Chrome v 38.0.2125.104 м (Windows 8.1)
Карты версии 2 устарели и не являются опцией. Я хотел бы стилизовать карты v3 только с помощью CSS, без графики и наложений. Я ищу обходной путь к проблеме рендеринга webkit. (Я уже открылХром № 187187 для этого, почти год спустя, еще предстоит рассмотреть).