CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapgoogle-maps
Ralph MacLand
Ralph MacLand

Reputation: 97

Google Maps with Bootstrap (Class - thumbnail)

I need to put a Google maps DIV inside another DIV using Bootstrap Framework.

But my code is not working properly. Google Maps DIV is out of the frame (Grey Frame ).

Which adjustments do you recommend? Any suggestions would be appreciated.

Below is the code:

snippet HTML (With Bootstrap Framework):

<div class="thumbnail">
   <img src="images/title2015.jpg" class="img-responsive">
   <div class="caption">

      <h4><span class="glyphicon glyphicon-map-marker"></span>&nbsp;Google Maps:</h4>

      <div id="map_canvas" name="map_canvas"></div>

   </div>
</div>

CSS:

#map_canvas{
    width: 100%;
    height: 260px;
    float: left;
    position: relative;
    background-color: #f0f0f0;
    overflow: hidden;
    -webkit-transform: translateZ(0);
}

Javascript:

<script>
    function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var myLatLng = new google.maps.LatLng(??.??????, ??.??????);
        var map_options = {
            center: myLatLng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(map_canvas, map_options);

        var marker = new google.maps.Marker({

            position: myLatLng,
            map: map,
            title: 'Localization'
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

wrong

Correct

Upvotes: 1

Views: 440

Answers (2)

Alex
Alex

Reputation: 8695

Add a clear div after #map_canvas

CSS

  .clear
  { 
          Clear: both;
  }

HTML

<div class="thumbnail">
   <img src="images/title2015.jpg" class="img-responsive">
   <div class="caption">

      <h4><span class="glyphicon glyphicon-map-marker"></span>&nbsp;Google Maps:</h4>

      <div id="map_canvas" name="map_canvas"></div>
    <div class="clear"></div>

   </div>
</div>

or add clearfix class to the thumbnail div

<div class="thumbnail clearfix">
   <img src="images/title2015.jpg" class="img-responsive">
   <div class="caption">

      <h4><span class="glyphicon glyphicon-map-marker"></span>&nbsp;Google Maps:</h4>

      <div id="map_canvas" name="map_canvas"></div>

   </div>
</div>

Upvotes: 1

partypete25
partypete25

Reputation: 4413

Here is the problem:

#map_canvas{
  float: left;
}

There is no need for you to have a 'float' on the map_canvas div. Remove it or set it to 'none'. There are also a couple others that appear unnecessary I have commented out.

https://jsfiddle.net/partypete25/j5pcptb4/1/

Upvotes: 2

Related Questions