CODEWITHSUNDEEP
cssgoogle-mapstwitter-bootstrap-3google-maps-api-2
John
John

Reputation: 337

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..?

Upvotes: 0

Views: 973

Answers (1)

Praveen
Praveen

Reputation: 56549

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

Upvotes: 1

Related Questions