2016-11-29 19 views
-1

這是兩個jsfiddles具有相同的代碼。 One是Google Maps API文檔中的一個分支,無需更改。 The second只是複製並粘貼到jsfiddle。 Google的分支按預期呈現。我複製並粘貼的那個不是。谷歌地圖API相同的例子:一個呈現,一個不

我用了差異檢查器,它顯示它們是相同的。我錯過了什麼?

HTML

<div id="map"></div> 
<!-- Replace the value of the key parameter with your own API key. --> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDglJmtJY5078jjZOJZFNNMO7CJb5E3nE4&callback=initMap"> 


</script> 

JS

// Note: This example requires that you consent to location sharing when 
// prompted by your browser. If you see the error "The Geolocation service 
// failed.", it means you probably did not give permission for the browser to 
// locate you. 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    zoom: 6 
    }); 
    var infoWindow = new google.maps.InfoWindow({map: map}); 

    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude 
     }; 

     infoWindow.setPosition(pos); 
     infoWindow.setContent('Location found.'); 
     map.setCenter(pos); 
    }, function() { 
     handleLocationError(true, infoWindow, map.getCenter()); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleLocationError(false, infoWindow, map.getCenter()); 
    } 
} 

function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
         'Error: The Geolocation service failed.' : 
         'Error: Your browser doesn\'t support geolocation.'); 
} 

CSS

/* Always set the map height explicitly to define the size of the div 
* element that contains the map. */ 
#map { 
    height: 100%; 
} 
/* Optional: Makes the sample page fill the window. */ 
html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

回答

2

在你的第二小提琴,JavaScript的設置都需要有負載類型爲No wrap - in <body>

相關問題