Forcing Tile Styling auf Google Maps API für Javascript V3

Question

Ich erstelle ein Karten-Plugin für Wordpress, das Google Maps JS API V3 verwendet. Üblicherweise werden die Karten in einen Wordpress-Post eingebettet, der gestylte Bilder enthält. Dies geschieht tatsächlich in einem der beliebtesten Themen TwentyEleven.

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

Was bedeutet dies für Google Maps ist, dass Kartenkacheln am Ende der Suche ist wie folgt:

Diese hat über geschrieben worden ist, nicht eine Tonne, aber die Menschen zu tun hatte damit. Also habe ich diese recherchiert.

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

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

Jeder Beitrag habe ich zu diesem Thema gesehen haben bietet die Lösung die Klasse Styling für die div der Änderung verwendet:

.wl_places_place_map_canvas img { 
max-width: none; 
} 

Das sieht besser aus, ist es wirklich tut . Ich finde aber keine Lösung, die es gut aussehen lässt. Es gibt zwei Effekte von dieser Lösung, die nicht wünschenswert sind.

1. Gelegentlich funktioniert die gestalterische Überschreibung bei Hintergrundbelastungen nicht.
2. Es ist immer noch sichtbar 1px Tile Gapping, die tatsächlich Marker Overlays Lücken, wenn sie zufällig auf Kachel-Linien sind.

mit dem backgrounded Stil Problem umgehen habe ich versucht, jQuery zu verwenden, und stellen Sie sicher, dass alle Fliesen vor dem Einstellen des Art geladen werden:

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);   
}); 

, die mit der ersten Angebote Problem, nicht die zweite und 1px Fliesen Lücken sind immer noch auf der Karte und Overlays sichtbar.

Was ich will ist eine 100% kugelsichere Möglichkeit, Stil auf der Karte zu erzwingen. Ich habe die API ausführlich recherchiert. Was ich würde wirklich wie ist eine Möglichkeit, den Stil auf der Karte selbst, hoffentlich als URL, und es würde ignorieren und überschreiben alle externen Stile. In der bestmöglichen Welt würde dieser Stil in Googles CDN leben und getestet werden, um immer sauber und frisch auszusehen, egal wo er eingebettet war.

Irgendwelche Ideen?

Answer 1

Ich habe soeben hinzugefügt #map img {max-width: none! Wichtig; } zu den ursprünglichen Kartenstilen. Scheint so weit zu arbeiten.

Alles funktionierte gut für mich auf WordPress, bis ich eine Karte in das HTML-Feld auf Gravity Forms hinzugefügt. Nicht sicher, warum es anfing zu versagen, aber das oben genannte behob das Kachelproblem.