Search code examples
cssgoogle-mapstwitter-bootstrap-3google-maps-api-2

Bootstrap 3 and google maps 2

I have a problem while working with Bootstrap 3 and gmaps 2..The problem is that my map controls are not displayed properly as shown in the image bellow.. enter image description here

Bellow is my code as well :

<script type="text/javascript">

function initialize(){
  if (GBrowserIsCompatible())
  {
    map=new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(37.084142,25.151997), 11);
    map.setUIToDefault();


  }

  }
  </script>
 </head>  
 <body onload="initialize()" onunload="GUnload()">

Any ideas..?

Solution

  • I too once crossed this problem, this is conflict occurred with your CSS with gmaps. You might have a global CSS like

    img {
  max-width:100% // or something
}

    By inspecting(using browser's dev tools) you can find where it is being overridden and try to make use of either id or class selectors and change it to none.

    I have tested it here

    #map_canvas img {
  max-width: none;
}