Google地圖未出現在div中

Question

我有以下代碼用於在我的php頁面中顯示google map。

<script>

var directionsDisplay,
directionsService,
map;

function initialize() { 
  var directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(51.508742,-0.120850);
  var mapOptions = { zoom:16, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
  map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
  var marker=new google.maps.Marker({
     position:chicago,
     visible:true
  });

 marker.setMap(map);
 directionsDisplay.setMap(map);
 }
 </script>
 <script src="https://maps.googleapis.com/maps/api/js?v=3&callback=initialize">

HTML：

<div name="mapdetail" value="" id="googlemap"
style="width:350px;height:300px;"class="" ></div>

顯示地圖邊框，但未出現地圖。

編輯：

我正在通過ajax單擊按鈕的對話框中加載此地圖。對話框也有其他輸入字段。 因此，我將Google API包含在以下代碼中：

if(!window.google||!window.google.maps){
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3&' +
    'callback=initialize';
   document.body.appendChild(script);
}
 else{
 initialize();
 }

jQuery對話框包含jquery選項卡插件。

Answer 1

這是你的代碼

API中缺少</script> ，例如@geocodezip建議的內容

和工作

    <!DOCTYPE html>
    <html>
      <head>
        <title>Test</title>
      </head>
      <body>
        <div name="mapdetail" value="" id="googlemap"
        style="width:350px;height:300px;"class="" ></div>

        <script>

        var directionsDisplay,
        directionsService,
        map;

        function initialize() { 
          var directionsService = new google.maps.DirectionsService();
          directionsDisplay = new google.maps.DirectionsRenderer();
          var chicago = new google.maps.LatLng(51.508742,-0.120850);
          var mapOptions = { zoom:16, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
          map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
          var marker=new google.maps.Marker({
             position:chicago,
             visible:true
          });

         marker.setMap(map);
         directionsDisplay.setMap(map);
         }
         </script>
         <script src="https://maps.googleapis.com/maps/api/js?v=3&callback=initialize"></script>
        </body>
    </html>

Google地圖未出現在div中

問題描述

1 個解決方案

解決方案1
0 2015-12-09 18:00:27

Google地圖未出現在div中

問題描述

1 個解決方案

解決方案1 0 2015-12-09 18:00:27

解決方案1
0 2015-12-09 18:00:27