Gmap api3 and bootstrap = grey block

问题

I'm updating some old code to Google Maps API v3, and I can't get the map to show anything. Dumping the map object to the console shows the map has been initialized properly and it is supposed to be loading in the proper div-- but nothing shows except a grey box.

I have set width/height and overflow for the map div, since this seems to be the most common problem.

However, I can't get this to work. Any ideas?

http://jsfiddle.net/Nbjrf/1/

Thanks

回答1:

You had the mapTypeId constant in quotes, 'google.maps.MapTypeId.HYBRID'; it's a constant, not a string: google.maps.MapTypeId.HYBRID

Also, you need to supply a map centre, and a zoom level. This works:

var mapInitOpts = {
    mapTypeId: google.maps.MapTypeId.HYBRID,
    center: new google.maps.LatLng(-32.891058,151.538042),
    zoom: 16
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapInitOpts);

Finally, you don't need to supply an API key any more.

回答2:

<!DOCTYPE html>
   <html>
      <head>
         <title>Google Maps JavaScript API v3 Example: Map Simple</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
         <meta charset="utf-8">
         <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
         <style>
             #map_canvas { height: 200px; width: 400px; overflow: visible; }
         </style>
      </head>
      <body>
         <div id="map_canvas"></div>
         <script>
            var myLatlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
               zoom: 8,
               center: myLatlng,
               mapTypeId: google.maps.MapTypeId.HYBRID
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         </script>  
      </body>
</html>

This works for me.

There is a big difference between

var maptype = 'google.maps.MapTypeId.HYBRID';
var mapInitOpts = {
      mapTypeId: maptype
};

and

var mapInitOpts = {
    mapTypeId: google.maps.MapTypeId.HYBRID
};

In 1 instance you are asigning to mapTypeId the text 'google.maps.MapTypeId.HYBRID' and the other you are assigning to mapTypeId the value of the variable google.maps.MapTypeId.HYBRID.

For your example to work you should at least put

var maptype = google.maps.MapTypeId.HYBRID;

not

var maptype = 'google.maps.MapTypeId.HYBRID';

Also I cannot make my example to work without zoom: and center: . Those might be required.

来源：https://stackoverflow.com/questions/13733510/gmap-api3-and-bootstrap-grey-block

标签

javascript

jquery

google-maps

google-maps-api-3