Twitter Bootstrap & Google Maps

Twitter Bootstrap CSS affecting Google Maps

With Bootstrap 2.0, this seemed to do the trick:

#mapCanvas img {
  max-width: none;
}

Google maps interferring with Twitter Bootstrap

The problem is that the bootstrap collapse plugin is not registering a dimension for your map canvas so it doesn't know what height to expand it to. To fix this, add some dimensions to your #map_canvas like so:

#map_canvas { height: 30em; width: 100%; }

Edit: As OP commented below, an specific height is required on the #map_canvas container to allow the proper expansion of the collapsible container.

How do I use Twitter Bootstrap with Google Maps v3?

When you added the jQuery <script> tag in your test page, you removed the <script> tag that loads your own script. That's why your load() function is undefined.

Your current code is:

<script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>

//<![CDATA[

var gmarkers = [];
var infoWindow = new google.maps.InfoWindow;
...

See how there's no <script> tag beginning your own script?

With regard to your question about needing a jQuery plugin to use the Maps API with jQuery, no, you definitely don't need one. I use jQuery and the Maps API together all the time. Consider this: What is a jQuery plugin? JavaScript code! Nothing else. Anything a jQuery plugin does, you can do in your own code.

(I suppose one could imagine that there may be some special bookkeeping that is needed to make jQuery and the Maps API work together, but that just isn't the case. jQuery doesn't care what's inside your map container.)

As @geocodezip mentioned, if you find the map working but odd things happening with the formatting of elements inside the map (e.g. the pan/zoom control gets clipped), check for CSS selectors that affect too many elements, such as:

img {
    /* anything here is dangerous! */
}

A selector like that will affect images inside the map, which should be left alone by your CSS. It doesn't look like you have this problem in your current working test page, just something to be aware of if it happens.

Also, just an unrelated tip, you don't need type="text/javascript" on your <script> tags, nor type="text/css" on your <style> tags.

Twitter Bootstrap & Google Maps

Posted the answer I found as comment before, but to make it more visible, here is the answer: https://github.com/twbs/bootstrap/issues/2475

You must add a javascript callback that will manually set the height
of the map-canvas when the window is resized, for example.

$(window).resize(function () {
    var h = $(window).height(),
        offsetTop = 60; // Calculate the top offset

    $('#map-canvas').css('height', (h - offsetTop));
}).resize();

Boostrap google map with feature to store and create map locally

I think this could be helpful for you

Google Map in Twitter Bootstrap Popver

If you're using popovers, your best bet might be to use google's static API and avoid the headaches associated with an interactive map. Borrowing a very simple case from the documentation, you might do something like this:

var options = { content: '<img src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&sensor=false">' };

$('#example').popover(options)

Wrapping it up into a reusable function yields:

var getMap = function(opts) {
  var src = "http://maps.googleapis.com/maps/api/staticmap?",
      params = $.extend({
        center: 'New York, NY',
        zoom: 14,
        size: '512x512',
        maptype: 'roadmap',
        sensor: false
      }, opts),
      query = [];

  $.each(params, function(k, v) {
    query.push(k + '=' + encodeURIComponent(v));
  });

  src += query.join('&');
  return '<img src="' + src + '" />';
}

var content = getMap({center: 'Fritz-Walter Stadion, Kaiserslautern'});
$('#example').popover({ content: content })

---

Related Topics