Javascript 谷歌地图JS API未显示-无错误

这是我第一次使用API，我已经搜索了过去提供给有相同问题的人的所有其他选项。我只是得到一个空白页面，控制台也没有显示错误。 这是我的密码：

#地图{
高度：100px；
宽度：100px；
}
html，正文{
高度：100px；
宽度：100px；
保证金：0；
填充：0；
}
var mLocations=null；
函数initMap（）{
变量分配
var标记，i；
var infowindow=new google.maps.infowindow（{}）；
$.getJSON（“），函数（pLocations）{
M位置=位置；
对于（i=0；i

我在这里至少看到了一些问题：

您正在for循环中使用

map

变量，然后才对其进行初始化。我将在getJSON回调之外初始化映射

您没有设置“中心”选项

如果$.getJSON没有成功，您可能看不到映射-使用

console.log

或断点查看是否正在计算您期望的所有行

您不需要导入jQuery来使用$.getJSON

尝试此更新的

initMap

功能：

function initMap() {
    var marker, i;

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: new google.maps.LatLng(0, 0);
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow({});

    $.ajax({
        url: "polarServer.asp?Screen=GetBlobScript&Script=LocationMap_GetMapData&SID=<%Context.WebSession.SessionIDcode%>",
        dataType: 'json',
        success: function(pLocations) {
            if (pLocations instanceof Array) {
                for (i = 0; i < pLocations.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(pLocations[i].lat, pLocations[i].lon),
                        map: map
                    });

                    google.maps.event.addListener(marker, 'Click', function () {
                        infowindow.setContent(pLocations[i].info);
                        infowindow.open(map, marker);
                    });
                }

                if (pLocations.length > 0) {
                    map.setCenter(new google.maps.LatLng(pLocations[0].lat, pLocations[0].lon));
                }
            } else {
                console.error("serve response is not an Array");
            }
        },
        error: function(err){
            console.error("Failed to get the data: ", err);
        }
    });
}

函数initMap（）{
var标记，i；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：11，
中心：新google.maps.LatLng（0,0）；
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（{}）；
$.ajax({
url:“polarServer.asp？Screen=GetBlobScript&Script=LocationMap\u GetMapData&SID=”，
数据类型：“json”，
成功：功能（pLocations）{
if（数组的pLocations实例）{
对于（i=0；i0）{
setCenter（新的google.maps.LatLng（pLocations[0].lat，pLocations[0].lon））；
}
}否则{
错误（“服务响应不是数组”）；
}
},
错误：函数（err）{
console.error（“获取数据失败：”，err）；
}
});
}

---

并确保在代码中嵌入jQuery，使用模拟位置在地图上显示PIN。 只需将模拟位置替换为

API调用

请尝试下面的代码片段

var mLocations=null；
函数initMap（）{
变量分配
var标记，i；
var infowindow=new google.maps.infowindow（{}）；
变量pLocations=[{
lat:-25.363，
伦敦：131.044
},
{
lat:-25.34470，
伦敦：131.05121
},
{
lat:-25.33259，
伦敦：131.02615
},
{
lat:-25.34501，
lon:131.01001
}
];
//$.getJSON（“polarServer.asp？Screen=GetBlobScript&Script=LocationMap\u GetMapData&SID=”，函数（pLocations）{
M位置=位置；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：15，
中心：新的google.maps.LatLng（pLocations[1].lat，pLocations[1].lon），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
对于（i=0；i

html，正文{
身高：100%；
}
#地图{
高度：550px；
宽度：100%；
}