Question

我有一个谷歌地图的问题，我们有一个网站，我们已经使用api介绍了一个地图，问题是它初始化时的地图是灰色的，他被指责调整大小，但我无法解决。最初隐藏地图，并通过单击显示的表中的字段进行jquery。

enter code here 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#googleMap {
 width: 100%;
 height: 470px;
 margin-top: 6.5%;
  overflow: visible;
   max-width: none !important;
 }



 </style>
</head>
<div id="googleMap"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=[key]&signed_in=false&">
</script>

 <script>
 var myCenter = new google.maps.LatLng(39.287649, -0.422548);
 var myCenterverd = new google.maps.LatLng(39.287413, -0.422255);
 var myCenterroig = new google.maps.LatLng(39.288497, -0.423953);
 var myCentergroc = new google.maps.LatLng(39.287766, -0.421604);



 function initialize() {
 var mapOptions = {
 center: new google.maps.LatLng(39.287413, -0.422255),
  zoom: 10,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 //disableDefaultUI: true
 };
  var map = new google.maps.Map(document.getElementById("googleMap"),mapOptions);

 //var marker=new google.maps.Marker({position:myCenter,icon:'gotaico.png'});
 var markerverd = new google.maps.Marker({
 position: myCenterverd,
 icon: '../dashboard/include/Mapa/iconosrellenos/gotaicoverd.png'
 });
 var markerroig = new google.maps.Marker({
 position: myCenterroig,
 icon: '../dashboard/include/Mapa/iconosrellenos/gotaicoroig.png'
 });
 var markergroc = new google.maps.Marker({
 position: myCentergroc,
 icon: '../dashboard/include/Mapa/iconosrellenos/gotaicogroc.png'
 });

 //marker.setMap(map);
 markerverd.setMap(map);
 markerroig.setMap(map);
 markergroc.setMap(map);

 }

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



   $(document).ready(function(map) {
   setTimeout('initialize()', 2000);
   google.maps.event.addListener(map, "idle", function(){
   google.maps.event.trigger(map, 'resize'); 
   this.map.setZoom( this.map.getZoom() - 1 );
   this.map.setZoom( this.map.getZoom() + 1 );

   });
   }); 
   </script>





   </html>

Answer 1

您可能应该在mapOptions中将backgroundColor设置为透明。

 var mapOptions = {
     center: new google.maps.LatLng(39.287413, -0.422255),
     zoom: 10,
     backgroundColor: 'transparent',
     mapTypeId: google.maps.MapTypeId.ROADMAP,
 };

灰盒子地图api

1 个答案: