Question

我有以下代码在我的php页面中显示谷歌地图。

<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.Dialog还有其他输入字段。所以我包括谷歌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 tabs插件。

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>

谷歌地图没有出现在div内

1 个答案: