Distorted controls on Google Map Widget for field_geo on Google Chrome [#2241449]

The Google Maps widget for field_geo (Geolocation OSM Submodule) works fine, but it displays somewhat distorted, almost invisible / unusable zoom in/zoom out / pan controls. See attached images.

On Firefox and Safari, the controls show just fine.

Comment	File	Size	Author
#4	gmap-control-distortion.JPG	154.66 KB	colorado
#1	markaspot-osm-getlocation-googlemaps-widget-safari.png	100.23 KB	Carlos Miranda Levy
#1	markaspot-osm-getlocation-googlemaps-widget-firefox.png	84.54 KB	Carlos Miranda Levy
	markaspot-osm-getlocation-googlemaps-widget.png	139.98 KB	Carlos Miranda Levy

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Carlos Miranda Levy CreditAttribution: Carlos Miranda Levy commented 15 April 2014 at 13:35

Title:	Distorted controls on Google Map Widget for field_geo	» Distorted controls on Google Map Widget for field_geo on Google Chrome
Issue summary:	View changes

File	Size
markaspot-osm-getlocation-googlemaps-widget-firefox.png	84.54 KB
markaspot-osm-getlocation-googlemaps-widget-safari.png	100.23 KB

Comment #2

markaspot CreditAttribution: markaspot commented 15 April 2014 at 14:36

Status:

Active

» Postponed (maintainer needs more info)

Did you really use the Geolocation OSM Submodule to load the tiles from Google? You should use the Geolocation Google Maps Submodule for this. If you did so, the bug should be filed in their issue queue. Anyway I will help as good as I can.

Comment #3

Carlos Miranda Levy CreditAttribution: Carlos Miranda Levy commented 16 April 2014 at 03:23

I get this on fresh install.
I's not the Geolocation OSM Submodule, as this is the Google Maps widget, submodule of geolocation field ( https://drupal.org/project/geolocation ).

It's actually a Theme issue.
Switching to Seven as Administration theme on /admin/appearance fixes this.

Comment #4

colorado CreditAttribution: colorado commented 16 April 2014 at 06:08

File	Size
gmap-control-distortion.JPG	154.66 KB

Same distortion in IE 10. Switching to Seven for Admin theme worked for me too.

Comment #5

markaspot CreditAttribution: markaspot commented 16 April 2014 at 06:58

I figured it out. Seems that we have to override the definitions in Ember's style.css. Thanks for testing.

/**
 * Default media styles
 */
img,
video,
audio,
figure {
  /* display: block; */
  /* margin: 0.70711em 0; */
  /* max-width: 100%; */
  /* height: auto; */
}

Comment #6

19 April 2014 at 07:29

Commit c6bd98a on 7.x-2.x by markaspot:

Issue #2241449 by Carlos Miranda Levy, colorado: Distorted controls on...

Comment #7

markaspot CreditAttribution: markaspot commented 19 April 2014 at 07:35

Status:

Postponed (maintainer needs more info)

» Needs work

This is now fixed with commit #83b0e2c. Still there is a slight map distortion with the Ember theme which I can't resolve to google maps generated markup or Ember's CSS. If someone finds some time digging deeper into that, I will be happy to apply a patch.