Javascript 试图在Google places API中查找附近的位置_Javascript_Html_Google Maps_Google Places Api

Javascript 试图在Google places API中查找附近的位置

javascript html google-maps

Javascript 试图在Google places API中查找附近的位置,javascript,html,google-maps,google-places-api,Javascript,Html,Google Maps,Google Places Api,我正在运行一个Javascript脚本来查找用户最近的租赁存储单元，但我一直遇到以下错误： ReferenceError: google is not defined 尽管我在代码中专门导入了谷歌地图的API。这是我的密码： <html> <style> #map{ width: 100%; height:100%; } </style> <div id="map"></div> &l

我正在运行一个Javascript脚本来查找用户最近的租赁存储单元，但我一直遇到以下错误：

ReferenceError: google is not defined

尽管我在代码中专门导入了谷歌地图的API。这是我的密码：

<html>
<style>
    #map{
        width: 100%;
        height:100%;
    }
</style>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=
AIzaSyByYsxs4EycWo0hRKr6deRs1A5Wo9niOZ4&callback=initMap"
async defer></script>
<script>
function find(){
  var request = {
    types: ['Storage Units']
  };
  infowindow = new google.maps.InfoWindow();
  places = new google.maps.places.PlaceServices(map);
  places.nearbySearch(request, callback);
}
find()
function initMap(){
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
  });
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      map.setCenter(initialLocation);
      // creates a marker of user's location
      var marker = new google.maps.Marker({
        position: initialLocation,
        map:map,
        title:'Your Location'
      });
    });
  }
}
</script>    
</html>


#地图{
宽度：100%；
身高：100%；
}
函数find（）{
var请求={
类型：[“存储单元”]
};
infowindow=new google.maps.infowindow（）；
places=新的google.maps.places.PlaceServices（地图）；
places.nearbySearch（请求、回调）；
}
查找（）
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：15，
});
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
initialLocation=new google.maps.LatLng（position.coords.lation，position.coords.longitude）；
地图设置中心（初始位置）；
//创建用户位置的标记
var marker=new google.maps.marker({
位置：初始位置，
地图：地图，
标题：“你的位置”
});
});
}
}

您正在异步加载Google Maps Javascript API（使用

异步延迟

）。在加载完成之前，API将不可用（

google

将未定义）。此时，它将运行回调函数（

initMap

）

API文档中的说明：

find

函数中的代码取决于正在加载的Google Maps Javascript API v3。将

find（）

函数调用的调用移到

initMap

中（或同步加载API）

注意：您也有一个输入错误，一旦我做了更改，我会得到javascript错误：

google.maps.places.PlaceServices不是构造函数

，应该是

google.maps.places.PlacesService

，然后

ReferenceError:callback没有定义

（因为它没有定义）

代码片段：（注意，由于沙箱的原因，不会初始化映射）

#地图{
身高：100%；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}


var映射；
函数查找（latLng）{
var请求={
类型：[“存储单元”]，
地点：拉丁美洲，
半径：10000
};
infowindow=new google.maps.infowindow（）；
places=新的google.maps.places.PlacesService（地图）；
places.nearbySearch（请求、回调）；
}
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：15，
中心：{lat:40.713485，lng:-74.005063}
});
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
initialLocation=new google.maps.LatLng（position.coords.lation，position.coords.longitude）；
地图设置中心（初始位置）；
//创建用户位置的标记
var marker=new google.maps.marker({
位置：初始位置，
地图：地图，
标题：“你的位置”
});
查找（marker.getPosition（））；
}，函数（错误）{console.log（错误）
});
}
}
函数回调（结果、状态、分页）{
如果（状态！=='OK'）返回；
创建标记（结果）；
};
函数createMarkers（位置）{
var bounds=new google.maps.LatLngBounds（）；
var placesList=document.getElementById（'places'）；
for（var i=0，place；place=places[i]；i++）{
变量图像={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
var marker=new google.maps.marker({
地图：地图，
图标：图像，
标题：place.name，
位置：place.geometry.location
});
var li=document.createElement（'li'）；
li.textContent=place.name；
placesList.appendChild（li）；
扩展（place.geometry.location）；
}
映射边界（bounds）；
}