Javascript 地图不可见，谷歌未定义

我需要在标记上单击的任何点周围创建一个缓冲区/圆圈。我遵循的代码是。我已转介了先前提出的有关这些问题，但未能找到令人满意的答案。我请求所有能回答的人分享，因为这会有很大帮助。提前谢谢。我已经添加了显示错误的脚本文件

     <script src="bootstrap-3.3.7-dist/jquery-3.2.1%20(2).js">     </script>
         <script>
         var map;
         var circle;
         var marker;

     var currentlatlng = new google.maps.LatLng(23.06368, 72.53135);  
     function loadMap() {
         setLatLongValue();
         var currentlatlng = new google.maps.LatLng(23.06368, 72.53135);   
         var map = new google.maps.Map(document.getElementById('map'), {
             zoom: 16,
             center: currentlatlng,   
             mapTypeId: 'terrain',
             mapTypeControl: true,
             navigationControl: true
         });

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

     }

     function setLatLongValue() {
         jQuery('#txtPointA1').val(currentlatlng.lat());//#txtPointA1
         jQuery('#txtPointA2').val(currentlatlng.lng());

     }
     marker.addListener('click', function (event) {
         drawCircle(event.latLng);
     });
     function drawCircle() {

         if (circle != undefined)
             circle.setMap(null);

         var radius = 200;

         if (jQuery('#txtPointB1').val() != '' && !isNaN(jQuery('#txtPointB1').val()) && parseInt(jQuery('#txtPointB1').val()) > 0) {
             radius = parseInt(jQuery('#txtPointB1').val());
         }
         jQuery('#txtPointB1').val(radius.toString());

         var options = {
             strokeColor: '#800000',
             strokeOpacity: 1.0,
             strokeWeight: 1,
             fillColor: '#C64D45',
             fillOpacity: 0.5,
             map: map,
             center: currentlatlng,
             radius: radius
         };

         circle = new google.maps.Circle(options);
     } 

     $(window).load(function () {

         loadMap();
         setLatLongValue();
                      drawCircle();
     });
            //$(document).ready(function () {
            //    loadMap();
            //    setLatLongValue();
            //    //setMarker();
            //    drawCircle();
            //});
</script>
    <script async 
src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=loadMap">
     </script>

var映射；
var圈；
var标记；
var currentlatlng=新的google.maps.LatLng（23.06368,72.53135）；
函数loadMap（）{
setLatLongValue（）；
var currentlatlng=新的google.maps.LatLng（23.06368,72.53135）；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：16，
中心:currentlatlng,，
mapTypeId:'地形'，
mapTypeControl:true，
导航控件：true
});
var marker=new google.maps.marker（{
职位：currentlatlng，
真的，
地图：地图
});
}
函数setLatLongValue（）{
jQuery（'#txtPointA1'）.val（currentlatlng.lat（））；/#txtPointA1
jQuery（'#txtPointA2'）.val（currentlatlng.lng（））；
}
marker.addListener（'click'，函数（事件）{
drawCircle（event.latLng）；
});
函数drawCircle（）{
如果（圆！=未定义）
circle.setMap（空）；
var半径=200；
if（jQuery（'#txtPointB1'）.val（）！='&&&！isNaN（jQuery（'#txtPointB1'）.val（））&&parseInt（jQuery（'#txtPointB1'）.val（））>0）{
radius=parseInt（jQuery（'#txtPointB1'）.val（））；
}
jQuery（'#txtPointB1'）.val（radius.toString（））；
变量选项={
strokeColor:“#800000”，
笔划不透明度：1.0，
冲程重量：1，
填充颜色：'#C64D45'，
填充不透明度：0.5，
地图：地图，
中心:currentlatlng,，
半径：半径
};
圆圈=新的google.maps.circle（选项）；
} 
$（窗口）。加载（函数（）{
loadMap（）；
setLatLongValue（）；
画圈（）；
});
//$（文档）.ready（函数（）{
//loadMap（）；
//setLatLongValue（）；
////setMarker（）；
//画圈（）；
//});

由于这句话，您得到了“未捕获的引用错误：未定义google”

var currentlatlng = new google.maps.LatLng(23.06368, 72.53135);

在执行这行代码时，google还没有定义。我建议将该语句放在loadMap（）函数中

检查此工作示例：

以下是代码片段：

var映射；
var圈；
var标记；
无功电流；
函数loadMap（）{
setLatLongValue（）；
currentlatlng=新的google.maps.LatLng（23.06368,72.53135）；
map=new google.maps.map（document.getElementById（'map'）{
缩放：16，
中心:currentlatlng,，
mapTypeId:'地形'，
mapTypeControl:true，
导航控件：true
});
var marker=new google.maps.marker({
职位：currentlatlng，
真的，
地图：地图
});
marker.addListener（'click'，函数（事件）{
drawCircle（event.latLng）；
});
setLatLongValue（）；
画圈（）；
}
函数setLatLongValue（）{
//jQuery（'#txtPointA1'）.val（currentlatlng.lat（））；/#txtPointA1
//jQuery（'#txtPointA2'）.val（currentlatlng.lng（））；
}
函数drawCircle（）{
var半径=200；
if（jQuery（'#txtPointB1'）.val（）！='&&&！isNaN（jQuery（'#txtPointB1'）.val（））&&parseInt（jQuery（'#txtPointB1'）.val（））>0）{
radius=parseInt（jQuery（'#txtPointB1'）.val（））；
}
jQuery（'#txtPointB1'）.val（radius.toString（））；
变量选项={
strokeColor:“#800000”，
笔划不透明度：1.0，
冲程重量：1，
填充颜色：'#C64D45'，
填充不透明度：0.5，
地图：地图，
中心:currentlatlng,，
半径：半径
};
圆圈=新的google.maps.circle（选项）；
}

#地图{
宽度：500px；
高度：500px；
}

样品

remove callback=loadmap form link错误是什么？此外，我认为显示api键不是一个好主意谢谢，但错误仍然存在。未捕获引用错误：google未定义这是错误，地图也未显示您正在尝试在加载之前使用

google

对象。删除async属性并将google引用放在javascript代码上方谢谢@James it worked该错误未显示但标记周围的圆圈未显示。请检查我更新的代码段。你现在可以看到你的标记周围的圆圈了。明白了吗？只是在loadMap中改变了drawCircle方法，它工作得非常好。明白了！只需将drawCircle函数移到loadMap中，它就可以很好地工作。但在控制台中，它仍然显示未定义的drawCircle。我试过你也编辑代码。非常感谢@James