2016-03-07 66 views
0

爲什麼Google地圖不會顯示在我的網站上,我一直在使用開發者網站?

/* This is the javascript function that makes the map load */ 
 
    function initMap() { 
 
    var mapDiv = document.getElementById('map'); 
 
    var map = new google.maps.Map(mapDiv, { 
 
     center: { 
 
     lat: 44.540, 
 
     lng: -78.546 
 
     }, 
 
     zoom: 8 
 
    }); 
 
    }
/* This is the basic css */ 
 

 
#map { 
 
    width: 500px; 
 
    height: 400px; 
 
}
<!-- Javascript called into the html page --> 
 

 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 

 
<body> 
 
    <div id="map"></div> 
 
    <script src="https://maps.googleapis.com/maps/api/js" async defer></script> 
 
</body> 
 

 
</html>

+0

其中c嵌入Google地圖庫時會定義allback?看起來從查詢字符串 – fcalderan

+0

中丟失了'&callback = initMap' from google api key –

回答

0

您的函數調用不使用$(文件)。就緒(函數()())的調用你的函數

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script> 
 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
 
    <script> 
 
$(document).ready(function() { 
 
    var mapDiv = document.getElementById('map'); 
 
    var map = new google.maps.Map(mapDiv, { 
 
     center: {lat: 44.540, lng: -78.546}, 
 
     zoom: 8 
 
    }); 
 
    
 
}); 
 
    </script> 
 
    <style> 
 
     #map { 
 
     width: 500px; 
 
     height: 400px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
     
 
    </body> 
 
</html>

+0

您需要註冊一個應用程序並在包含來自Google的JavaScript庫時才能獲取API密鑰 –

+0

您看不到您看到Snippet正在運行? –

+0

感謝球員我得到它的工作,我真的很感激你的所有幫助 –

0

你需要添加一個DOM監聽器將執行在窗口負荷initMap()功能。

試試這個

function initMap() { 
 
    var mapDiv = document.getElementById('map'); 
 
    var map = new google.maps.Map(mapDiv, { 
 
    center: new google.maps.LatLng(44.540, -78.546), 
 
    zoom: 8 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initMap);
#map { 
 
    width: 500px; 
 
    height: 400px; 
 
}
<script src="https://maps.googleapis.com/maps/api/js" ></script> 
 
<div id="map"></div>

相關問題