Javascript Google Place自动完成API显示空白地图

我正在使用下面的脚本在我的网页上显示自动完成的PlaceAPI，一切正常，但地图没有显示，我尝试了多种解决方案，但它们都没有任何帮助这是我的脚本

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<script>
var map;
var marker;

var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos,
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerAddress(str) {

  document.getElementById("location-text-box").value = str;
}


 function initialize() {
  var mapOptions = {
    zoom: 8
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // Get GEOLOCATION
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
        position.coords.longitude);

      map.setCenter(pos);
      marker = new google.maps.Marker({
        position: pos,
       map: map,
        draggable: true
      });

       google.maps.event.addListener(marker, 'dragstart', function() {
    //updateMarkerAddress('Dragging...');
  });

  google.maps.event.addListener(marker, 'drag', function() {
    //updateMarkerStatus('Dragging...');
    //updateMarkerPosition(marker.getPosition());
  });

  google.maps.event.addListener(marker, 'dragend', function() {
   // alert("drag ended");
    //updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
  });



    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }

  function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
      var content = 'Error: The Geolocation service failed.';
    } else {
      var content = 'Error: Your browser doesn\'t support geolocation.';
    }

    var options = {
      map: map,
      position: new google.maps.LatLng(60, 105),
      content: content
    };

    map.setCenter(options.position);
    marker = new google.maps.Marker({
      position: options.position,
     map: map,
      draggable: true
    });

    // Update current position info.
  google.maps.event.addListener(marker, 'dragstart', function() {
    //updateMarkerAddress('Dragging...');
  });

  google.maps.event.addListener(marker, 'drag', function() {
    //updateMarkerStatus('Dragging...');
    //updateMarkerPosition(marker.getPosition());
   });

  google.maps.event.addListener(marker, 'dragend', function() {
   // alert("drag ended");
    //updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
  });

    }


  // get places auto-complete when user type in location-text-box
  var input = /** @type {HTMLInputElement} */
    (
      document.getElementById('location-text-box'));


  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29),
    draggable: true
  });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17); // Why 17? Because it looks good.
    }
    marker.setIcon( /** @type {google.maps.Icon} */ ({
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(35, 35)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
      address = [
    (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
  ].join(' ');
    }

  });

}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>

var映射；
var标记；
var geocoder=new google.maps.geocoder（）；
功能地理编码定位（pos）{
地理编码({
位置:，
}，职能（回应）{
if（responses&&responses.length>0）{
UpdateMarkeradAddress（响应[0]。格式化的\u地址）；
}否则{
UpdateMarkeradAddress（'无法确定此位置的地址'）；
}
});
}
函数更新标记地址（str）{
document.getElementById（“位置文本框”）.value=str；
}
函数初始化（）{
变量映射选项={
缩放：8
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
//获取地理位置
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos=新的google.maps.LatLng（position.coords.latitude，
位置坐标经度）；
地图设置中心（pos）；
marker=新的google.maps.marker({
职位:pos,，
地图：地图，
德拉格布尔：是的
});
google.maps.event.addListener（标记'dragstart'，函数（）{
//UpdateMarkeradAddress（'拖动…'）；
});
google.maps.event.addListener（标记'drag'，function（）{
//updateMarkerStatus（'拖动…'）；
//updateMarkerPosition（marker.getPosition（））；
});
google.maps.event.addListener（标记'dragend'，function（）{
//警报（“拖动结束”）；
//updateMarkerStatus（“拖动结束”）；
geocodePosition（marker.getPosition（））；
});
}，函数（）{
手持导航（真）；
});
}否则{
//浏览器不支持地理位置
手动定位（假）；
}
函数handleNogeLocation（errorFlag）{
如果（错误标志）{
var content='错误：地理位置服务失败'；
}否则{
var content='错误：您的浏览器不支持地理位置'；
}
变量选项={
地图：地图，
职位：新google.maps.LatLng（60105），
内容：内容
};
地图设置中心（选项位置）；
marker=新的google.maps.marker({
位置：options.position，
地图：地图，
德拉格布尔：是的
});
//更新当前职位信息。
google.maps.event.addListener（标记'dragstart'，函数（）{
//UpdateMarkeradAddress（'拖动…'）；
});
google.maps.event.addListener（标记'drag'，function（）{
//updateMarkerStatus（'拖动…'）；
//updateMarkerPosition（marker.getPosition（））；
});
google.maps.event.addListener（标记'dragend'，function（）{
//警报（“拖动结束”）；
//updateMarkerStatus（“拖动结束”）；
geocodePosition（marker.getPosition（））；
});
}
//当用户在“位置”文本框中键入时，获取位置自动完成
变量输入=/**@type{HTMLInputElement}*/
(
document.getElementById（'location-text-box'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
autocomplete.bindTo（'bounds'，map）；
var infowindow=new google.maps.infowindow（）；
marker=新的google.maps.marker({
地图：地图，
主播点：新google.maps.Point（0，-29），
德拉格布尔：是的
});
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
infowindow.close（）；
marker.setVisible（假）；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
返回；
}
//如果该地点有几何图形，则将其显示在地图上。
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（17）；//为什么是17？因为它看起来不错。
}
marker.setIcon（/**@type{google.maps.Icon}*/({
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize：新的google.maps.Size（35,35）
}));
标记器.设置位置（位置.几何.位置）；
marker.setVisible（true）；
var地址=“”；
if（位置、地址和组件）{
地址=[
（place.address_components[0]&&place.address_components[0]。short_name|124;“”，（place.address_components[1]&&place.address_components[1]。short_name||“”，（place.address_components[2]&&place.address_components[2]。short|name| |“”）
].加入（“”）；
}
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

我要出去的地方是

html

<div style="width:100%; height:100%;">
<input id="location-text-box"/>
<div id="map-canvas"></div>
</div>

不仅显示脚本，还显示html代码。。（脚本似乎有用）@scaisEdge:只需更新我的问题，请检查now@geocodezip它可以单独工作，但我有一个完整的用户仪表盘，API应该可以在那里工作，但它对我来说不工作太好，那么问题是与代码或环境相关的，我们无法看到或评估。。