谷歌地图容器显示没有地图

我知道这已被问了很多次，但没有其他答案我见过似乎帮助我。基本上，地图的容器显示（作为页面上的500x300px空白区域），但没有地图。无论我做什么，我都无法让地图显示。您可能会猜到，我对Google地图不熟悉，因此不胜感激任何帮助。我已经设置了一个缩放，其中包括“overflow：visible”，这是另一个建议。谷歌地图容器显示没有地图

希望这个小提琴作品：https://jsfiddle.net/7cvj565j/

findafitter.php - 在地图上显示

<div class="container text-center"> 
    <div class="row"> 
     <div class="col-sm-8"> 
      <div id="map-container"> 
       <div id="googleMap" style="height:300px; width:500px;"> 
        <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap" async defer></script> 
        <script src="includes/findafitter2.js"></script> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-4"> 
      Enter your postcode to find your nearest fitter. Do you have any questions? <a href="contact.php">Let us know!</a> 
      <input id="address" type="textbox" value=""> 
      <input type="button" value="Find My Nearest Fitter" onclick="checkZip(getElementById('address').value)"> 
     </div> 
    </div> 
</div>

findafitter2.js - 在地图

var geocoder; 
var map; 
var markers = []; 

function initialize() 
{ 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(40.768505, -111.853244); 
    var myOptions = 
    { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("googleMap"), myOptions); 
    addPostCode('84101'); 
    addPostCode('84102'); 
    addPostCode('84103'); 
    addPostCode('84104'); 
    addPostCode('84105'); 
} 

function addPostCode(zip) 
{ 
    geocoder.geocode({ 'address': zip}, function(results, status) 
    { 
     if (status == google.maps.GeocoderStatus.OK) 
     { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location, 
       name: zip 
      }); 
      markers.push(marker); 
     } 
     else 
     { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 

function checkZip(zip) 
{ 
    var distance = Number.MAX_VALUE; 
    var index = 0; 
    geocoder.geocode({ 'address': zip}, function(results, status) 
    { 
     if (status == google.maps.GeocoderStatus.OK) 
     { 
      for(ix=0; ix< markers.length; ix++) 
      { 
       var tmp = getDistance(results[0].geometry.location, markers[ix].position); 
       if (tmp < distance) 
       { 
        distance = tmp; 
        index = ix; 
       } 
      } 
      alert('nearest zipcode is :' + markers[index].name); 
     } 
    }); 
} 

function getDistance(latlng1, latlng2) 
{ 
    var R = 6371; // Radius of the earth in km 
    var dLat = (latlng2.lat()-latlng1.lat()) * Math.PI/180; // Javascript functions in radians 
    var dLon = (latlng2.lng()-latlng1.lng()) * Math.PI/180; 
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
      Math.cos(latlng1.lat() * Math.PI/180) * Math.cos(latlng2.lat() * Math.PI/180) * 
      Math.sin(dLon/2) * Math.sin(dLon/2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c; // Distance in km 
    d = d * 0.621371192; // convert to miles 
    return d; 
}

代码styles.css - 相关位

#map-container 
{ 
    min-height: 300px; 
    color: #000000; 
    overflow: visible; 
}

的谷歌地图的代码是从另一个拍摄SO后（Google maps - Postcode plotting），看看我的地图代码被打破了 - 这是很相似，我会做，并且代码作品为数众多。

希望这已经够清楚了。提前致谢！

来源

2017-06-17 lukecolli98

您是否尝试过使用Google地图自动生成的iframe呢？ –

iframe的选择是最容易的，但我认为你需要的JS版本。 https://jsfiddle.net/scorpio777/af2nzqh1/

这可能不适合你，因为API密钥不正确，或者它与你使用的div和样式有关。将地图放置在您的网页上的最简单方法是在Google地图上搜索位置，根据需要自定义大小并将嵌入的代码作为iframe。

1. Search the wanted location on Google maps 
2. Choose "Share or embed map" from the top-right "hamburger" menu 
3. Choose "Embed map" tab > "Custom size" 
and you have the iframe code.

来源

2017-06-17 15:18:44 DanielaB67

你的JavaScript解决方案工作，谢谢！我需要能够找到给定的邮政编码最近的标记 - iframe方法会影响我这样做吗？（我的问题中的代码希望已经这样做） – lukecolli98

在Google地图中搜索您想要的位置。
点击“分享”
点击“嵌入地图”上
谷歌地图将自动生成一个iframe供您使用

告诉我你觉得这个方法的！

似乎比从另一个StackOverflow文章获取谷歌地图代码更好，并试图使其工作。

<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319" width="100%" height="300px" frameborder="0" style="border:0"></iframe>

来源

2017-06-17 14:47:39

我需要能够找到用户给出的邮编最近的标记。希望我提供的代码能做到这一点，但由于地图不显示，我无法测试它。我喜欢iframe解决方案，但它会允许我这样做吗？ – lukecolli98

谷歌地图容器显示没有地图

回答

相关问题