谷歌地圖容器顯示沒有地圖

我知道這已被問了很多次，但沒有其他答案我見過似乎幫助我。基本上，地圖的容器顯示（作爲頁面上的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

谷歌地圖容器顯示沒有地圖

回答

相關問題