我的谷歌地图被切断，我想知道为什么？ Javascript，V [英] My google maps is cut off, I'm wondering why? Javascript, V

问题描述

这是很难解释，所以我上传了一个屏幕截图的问题：

正如你所看到的，尽管在地图上的div房地产（这是实际大小），它只显示地图的1/6！这个小部件可以调整大小，但即使它是它被切断。我相信我做错了，但不能弄清楚。下面是包含地图的div的CSS代码：

  #map {
 border-right-color：black ; 
 border-left-color：black; 
 border-right-width：1px; 
 border-left-width：1px; 
 position：absolute; 
 margin-top：0px; 
 top：38px; 
 left：0px; 
 width：auto; 
 height：auto; 
 right：0px; 
 bottom：10px; 
 background-color：rgb（204，204，204）; 
 border-bottom-style：solid; 
 border-top-style：solid; 
 border-bottom-width：1px; 
 border-top-width：1px; 
 border-bottom-color：rgb（204，204，204）; 
 border-top-color：rgb（204，204，204）; 
 overflow：hidden; 
} 
  

这是制作地图的javascript：

  // google maps apis 
 var marker; 
 var setLocation = new google.maps.LatLng（59.32522，18.07002）; 
 
 var marker; 
 
 function placeMarker（location）{
 if（marker）{
 marker.setPosition（location）; 
} else {
 marker = new google.maps.Marker（{
 position：location，
 map：map，
 draggable：true 
}） ; 
} 
} 
 
 function searchGoogleMaps（event）{
 var address = event.target.value; 
 geocoder.geocode（{'address'：address}，function（results，status）{
 if（status == google.maps.GeocoderStatus.OK）{
 map.setCenter [0] .geometry.location）; 
 
 placeMarker（results [0] .geometry.location）
 
 
} else {
 alert（地理编码不成功的原因如下：+ status）; 
} 
}）; 
} 
 
 
 var geocoder; 
 var map; 
 function initialize（）{
 geocoder = new google.maps.Geocoder（）; 
 var latlng = new google.maps.LatLng（-34.397，150.644）; 
 var myOptions = {
 zoom：2，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 map = new google .maps.Map（document.getElementById（map），myOptions）; 
} 
 
 
 function toggleBounce（）{
 
 if（marker.getAnimation（）！= null）{
 marker.setAnimation空值）; 
} else {
 marker.setAnimation（google.maps.Animation.BOUNCE）; 
} 
} 
  

最后是被调用的javascript文件这一切都会发生：

 < script type =text / javascriptsrc =http://maps.googleapis.com / maps / api / js？libraries = places& amp; sensor = false>< / script>提前感谢，特别是花时间阅读这样长的问题！
 
 
 
解决方案
每当你的<映射'改变它的大小，你需要触发' code> code> resize '事件：
 
 
开发人员应在地图，当div更改
 size：google.maps.event.trigger（map，'resize'）。
 
 
 a href =https://developers.google.com/maps/documentation/javascript/reference#Map> https://developers.google.com/maps/documentation/javascript/reference#Map   p> 
It's kinda hard to explain so I uploaded a screen shot of the issue:


As you can see, despite the div real-estate on the map (this is actual size), it only displays 1/6th of the map! This little widget can be resized but even when it is it is cut off. I'm sure I'm doing something wrong but can't figure it out. Here's the CSS code for the div that contains the map:
#map {
border-right-color: black;
border-left-color: black;
border-right-width: 1px;
border-left-width: 1px;
position: absolute;
margin-top: 0px;
top: 38px;
left: 0px;
width: auto;
height: auto;
right: 0px;
bottom: 10px;
background-color: rgb(204, 204, 204);
border-bottom-style: solid;
border-top-style: solid;
border-bottom-width: 1px;
border-top-width: 1px;
border-bottom-color: rgb(204, 204, 204);
border-top-color: rgb(204, 204, 204);
overflow: hidden;
}
here's the javascript that is making the map:
 //google maps apis
 var marker;
 var setLocation =  new google.maps.LatLng(59.32522, 18.07002);

 var marker;

 function placeMarker(location) {
   if ( marker ) {
     marker.setPosition(location);
   } else {
     marker = new google.maps.Marker({
  position: location,
  map: map,
  draggable: true
     });
   }
 }

  function searchGoogleMaps(event) { 
var address =event.target.value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);

        placeMarker(results[0].geometry.location)


  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
     });
   }  


  var geocoder;
   var map;
   function initialize() {
     geocoder = new google.maps.Geocoder();
     var latlng = new google.maps.LatLng(-34.397, 150.644);
     var myOptions = {
  zoom: 2,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
   }


   function toggleBounce() {

if (marker.getAnimation() != null) {
  marker.setAnimation(null);
} else {
  marker.setAnimation(google.maps.Animation.BOUNCE);
}
   }
and finally the javascript file that is being called to make this all happen:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"></script>
Thanks in advance, especially for taking the time to read a long question like this!
解决方案
Whenever your 'map' div changes its sizes, you need to trigger 'resize' event explicitly on Google Maps component:

  
Developers should trigger this event on the map when the div changes
  size: google.maps.event.trigger(map, 'resize') .
https://developers.google.com/maps/documentation/javascript/reference#Map

                        
这篇关于我的谷歌地图被切断，我想知道为什么？ Javascript，V的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！