Принудительное использование стиля плитки в Google Maps API для Javascript V3 - PullRequest
Новая
       15

Принудительное использование стиля плитки в Google Maps API для Javascript V3

1 голос
/ 29 марта 2012

Я создаю плагин для карт для Wordpress, который использует Google Maps JS API V3. Обычно карты будут встроены в пост WordPress, в котором есть стилизованные изображения. На самом деле это происходит в одной из самых популярных тем TwentyEleven. 

.entry-content img,
.comment-content img,
.widget img {
 max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}

Что это означает для карт Google, так это то, что плитки карт в конечном итоге выглядят так:

google maps with cascaded style from theme

Это было опубликовано около, не тонна, но людям пришлось иметь дело с этим. Итак, я исследовал это.

http://wordpress.org/support/topic/twenty-eleven-12-breaks-embedded-google-maps

http://wpscale.com/google-street-map-cant-work-in-wordpress-3-2/

Каждый пост, который я видел на эту тему, предлагает решение изменения стиля класса для используемого div: 

.wl_places_place_map_canvas img {
max-width: none;
}

Это выглядит лучше, это действительно так. Я не нахожу решение, которое делает его великолепным. У этого решения есть два нежелательных эффекта.

  1. Иногда при фоновой загрузке плитки переопределение стиля фактически не работает.
  2. По-прежнему виден 1-пиксельный разрыв плитки, который фактически пропускает маркеры, если они оказываются на линиях плитки.

google maps with style override

Чтобы решить проблему с фоновым стилем, я попытался использовать jQuery и убедиться, что все плитки загружены до установки стиля: 

google.maps.event.trigger(_instance._map, 'resize');
var listener = google.maps.event.addListener(_instance._map, "tilesloaded", function() {
 jQuery('.wl_places_place_map_canvas').find('img').css('max-width','none');
 google.maps.event.removeListener(listener);        
});

Это касается первой проблемы, но на карте все еще не видны пробелы во втором и 1px тайлах и наложения.

То, что я хочу, это 100% пуленепробиваемый способ навязать стиль на карте. Я тщательно исследовал API. Мне бы действительно понравился способ установки стиля на самой карте, возможно, в виде URL, который игнорировал бы и переопределял все внешние стили. В лучшем мире этот стиль будет жить в CDN Google и будет проверен на чистоту и свежесть независимо от того, где он был встроен.

Есть идеи?

1 Ответ

1 голос
/ 03 октября 2015

Я только что добавил #map img {max-width: none! Важный; } к начальным стилям карты. Кажется, до сих пор работает.

У меня все работало нормально на WordPress, пока я не добавил карту в поле HTML в Gravity Forms. Не уверен, почему это начало сбой, но выше было решено проблема плитки.

...