Monday, March 3, 2014

Google Maps API Controls Do Not Display with Bootstrap

Problem:
Adding a Google Maps API control to a web page, I found that the controls were failing to render properly. They looked like this:



Solution:
It happens that a generic style in my Bootstrap theme was causing the issue. By adding two additional CSS rules, we can override the Bootstrap changes, and restore our controls.

.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }