admin管理员组

文章数量:1277397

I am trying to implement google maps on bootstrap.

I've followed Google's own guide, here:

Whilst this works on a standalone page, when I add the Bootstrap CSS the map doesn't show. I can't seem to find a hack that fixes it.

HTML:

  <body>
    <div id="map-canvas"></div>
  </body>

Script:

var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

CSS (over bootstrap)

  html, body, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
  }

See here for jsFiddle: /

Has anyone encountered this before? I must be missing a basic workaround but no amount of forum searching has helped.

Thanks

I am trying to implement google maps on bootstrap.

I've followed Google's own guide, here: https://developers.google./maps/documentation/javascript/examples/map-simple

Whilst this works on a standalone page, when I add the Bootstrap CSS the map doesn't show. I can't seem to find a hack that fixes it.

HTML:

  <body>
    <div id="map-canvas"></div>
  </body>

Script:

var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

CSS (over bootstrap)

  html, body, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
  }

See here for jsFiddle: http://jsfiddle/robmc/6BTjE/2/

Has anyone encountered this before? I must be missing a basic workaround but no amount of forum searching has helped.

Thanks

  • javascript
  • google-maps
  • css
  • twitter-bootstrap
Share Improve this question asked May 30, 2013 at 19:18 alias51alias51 8,64822 gold badges106 silver badges185 bronze badges 2
  • Uncaught ReferenceError: google is not defined – Mansfield Commented May 30, 2013 at 19:19
  • And you also need to set the map canvas width. – slash197 Commented May 30, 2013 at 19:26
Add a ment  | 

3 Answers 3

Reset to default 5

I've fixed the issue by changing the height to px. hope it helps

#map-canvas{
    /*height: 100%;*/
    height: 400px;
}

This doesn't appear to be a Bootstrap issue. For the fiddle you need to use document.ready, and the external resource "http://maps.googleapis./maps/api/js?v=3&sensor=false&extension=.js"

http://jsfiddle/6BTjE/8/

Also, there is no reference bootstrap in your fiddle. Here is a demo with Google maps and Bootstrap...

Bootstrap + Google Maps

You can see the jQuery document.ready in the JavaScript...

$(document).ready(function() {
 // code here
});

//I did this , it worked for me 

$(document).ready(function(){
    var height=$( document ).height();
    $("#map").css("height", height );
});

$( document ).resize(function() {
    var height=$( document ).height();
    $("#map").css("height", height );
});

本文标签： javascriptGoogle Maps does not display on BootstrapStack Overflow

版权声明：本文标题：javascript - Google Maps does not display on Bootstrap? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741290625a2370527.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。