Javascript 地理定位谷歌地图不起作用

我试图在我的地图上得到距离环，图像的位置在用户位置之上，但是当我测试它时，地图没有显示，并且用户的位置似乎没有显示在地图上。我不知道出了什么问题，我在一个网站上学习了一个教程。 代码如下：

雷达
#地图画布{
高度：700px；
}
#标志{
位置：固定；
z指数：99；
最高：8%；
左：3%；
不透明度：0.9；
}
#传说{
位置：绝对位置；
z指数：98；
最高：87%；
左：82%；
不透明度：1.0；
高度：50px；
}
//[启动区域\初始化]
//此示例创建一个名为USGSOverlay的自定义覆盖，其中包含
//地图上相关区域的美国地质调查局（USGS）图像。
//将自定义覆盖对象的原型设置为新实例
//在我看来。实际上，这将对overlay类进行子类化。
//请注意，我们将原型设置为实例，而不是
//父类本身，因为我们不希望修改父类。
var叠加；
USGSOverlay.prototype=new google.maps.OverlayView（）；
//初始化贴图和自定义覆盖。
函数初始化（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（成功）；
}否则{
错误（“不支持地理位置”）；
}
功能成功（职位）{
var lat=位置坐标纬度；
var long=位置坐标经度；
}
var coords=new google.maps.LatLng（position.coords.latitude，position.coords.longitude）；
变量样式=
[{“featureType”：“administrative”，“elementType”：“geometry.fill”，“stylers”：[{“lightness”：-88}，{“saturation”：-100}，{“visibility”：“on”}，{“featureType”：“administrative.country”，“stylers”：[{“visibility”：“on”}，{“weight”：1.3}，{“lightness”：-100}，{“featureType”：“景观”，“stylers”：[{“saturation”：-100}，{“亮度”：-81}]}，{“特征类型”：“poi”，“样式器”：[{“可见性”：“关闭”}}，{“特征类型”：“道路.局部”，“样式器”：[{“可见性”：“关闭”}]}，{“特征类型”：“道路.动脉”，“元素类型”：“几何”，“样式器”：[{“可见性”：“关闭”}}，{“特征类型”：“道路.公路.受控通道”，“样式器”：[{“可见性”：简化的“}]}，{“特征类型”：“道路.公路.受控通道”，“元素类型”：“几何体.填方”，“样式器”：[{“可见性”：“简化的”}，{“饱和度”：-100}，{“亮度”：100}，{“重量”：1.3}}}，{“特征类型”：“道路.公路”，“样式器”：[{“可见性”：“简化的”}}，{“特征类型”：“行政.地点”elementType:“标签”，“样式器”：[{“亮度”：100}，{“可见性”：“简化的”}]}，{“特征类型”：“道路.公路”，“elementType:“几何体.填充”，“样式器”：[{“可见性”：“简化的”}，{“亮度”：100}]}，{“特征类型”：“行政.省”，“元素类型”：“几何体.笔划”，“样式器”：[{“亮度”：100}，{”饱和度：“-100}]}，{”特征类型：“-65}，{”饱和度：“-1}，{”色调：“#0000ff”}，{”特征类型：“{”水”，“特征类型：“{”饱和度：“-53}，{”亮度：“{“：-36}，{“色调”：“#00f6ff”}，{“特征类型”：“风景”，“样式”：[{“亮度”：-39}]}，{}]
//创建一个新的StyledMapType对象，将样式数组传递给它，
//以及要显示在地图类型控件上的名称。
var styledMap=new google.maps.StyledMapType（样式，
{name:“样式化映射”}）；
变量映射选项={
缩放：7，
中心：coords，
泛控制：错误，
动物控制：错误，
mapTypeControl:false，
街景控制：错误，
MapTypeId:[google.maps.MapTypeId.ROADMAP，'map_style']
};
var map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
map.mapTypes.set（'map\u style'，styledMap）；
setMapTypeId（'map_style'）；
变量图标={
url:'met.nl.eu.org/klanten/python/marker.png'
};
var marker=new google.maps.marker({
职位：coords，
地图：地图，
图标：图标
});
//地图准备好后，查询并绘制数据
google.maps.event.addListenerOnce（map'idle'，function（）{
$.ajax({
数据类型：“json”，
url:“http://met.nl.eu.org/klanten/python/get_lightnings.php"
}).完成（功能（数据）{
data.d.forEach（功能（lightning）{
var图像处理http://met.nl.eu.org/klanten/python/strike.png'
新的google.maps.Marker({
位置：新的google.maps.LatLng（lightning.lat，lightning.lon），
地图：地图，
图标：image}）；
});
});
});
var swBound=new google.maps.LatLng（48.895311,0.000000）；
var neBound=new google.maps.LatLng（55.973607,10.856428）；
var bounds=new google.maps.LatLngBounds（swBound，neBound）；
//这张照片是梅特纳提供的。
var srcImage='v2.0/historie/28-06-11/00.png'；
//自定义USGSOverlay对象包含USGS图像，
//图像的边界和对贴图的引用。
覆盖=新的USGSOverlay（边界、srcImage、地图）；
}
//[结束区域\初始化]
//[启动区域\u构造函数]
/**@constructor*/
函数USGSOverlay（边界、图像、地图）{
//初始化所有属性。
this.bounds=bounds；
this.image=image；
this.map=map；
//定义一个属性来保存图像的div。我们将
//在收到onAdd（）时实际创建这个div
//方法，因此我们暂时将其保留为空。
this.div=null；
//在此覆盖上显式调用setMap。
这个.setMap（map）；
}
//[终端区域\u构造函数]
//[启动区域\附件]
/**
*当地图的窗格准备就绪且覆盖已完成时，将调用onAdd
*添加到地图中。
*/
USGSOverlay.p
function initialize() {

    //define a default-position
    var coords = new google.maps.MVCObject();
    coords.set('latlng', new google.maps.LatLng(52.370215, 4.895167));

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success);
    }


    //set new value for coords
    function success(position) {
        coords.set('latlng',
            new google.maps.LatLng(position.coords.latitude,
                position.coords.longitude));
    }

    var mapOptions = {
        zoom: 7,
        center: coords.get('latlng')
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

    var marker = new google.maps.Marker({
        position: coords.get('latlng'),
        map: map
    });

    //observe the latlng-property of coords,
    //and update marker and map-center when it changes
    google.maps.event.addListenerOnce(coords, 'latlng_changed', function () {
        var latlng = this.get('latlng');
        map.setCenter(latlng);
        marker.setPosition(latlng)
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>