在关注视频教程后，我的Google地图不会以chrome显示，需要帮助。 [英] My Google map wont display in chrome after following a video tutorial, need help.
本文介绍了在关注视频教程后，我的Google地图不会以chrome显示，需要帮助。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，
Google地图JavaScript API教程 - YouTube [ ^ ]
我按照上面的视频教程
Hi there,
Google Maps JavaScript API Tutorial - YouTube[^]
I followed the video tutorial above which is called "
Google Maps JavaScript API Tutorial". < br $> b $ b
我的问题是，当我在chrome上编译它时，它会显示我设置的标题，但不显示带有标记的谷歌地图。
以下是代码：
My problem is that when I compile it on chrome, it displays the title I set but not the google map itself with the markers.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Arduino Smart Stick Location Map</title>
<style>
#map{
height:400px;
width:100%;
}
</style>
</head>
<body>
<h1>Arduino Smart Stick Location Map</h1>
<div id="map"></div>
<script>
function initMap(){
// Map options
var options = {
zoom:10,
center:{lat:53.4808,lng:-2.2426}
}
// New map
var map = new google.maps.Map(document.getElementById('map'), options);
// Listen for click on map
google.maps.event.addListener(map, 'click', function(event){
// Add marker
addMarker({coords:event.latLng});
});
/*
//Add marker
var marker = new google.maps.Marker({
position:{lat:53.4808,lng:-2.2426},
map:map,
icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});
var infoWindow = new google.maps.InfoWindow({
content:'<h1>Lynn MA</h1>'
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
});
*/
// Array of markers
var markers = [
{
coords:{lat:53.470912,lng:-2.241365},
iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
content:'<h1>John Dalton East Carpark</h1>'
},
{
coords:{lat:53.471740,lng:-2.240842},
content:'<h1>John Dalton East Tower</h1>'
},
{
coords:{lat:53.472499,lng:-2.240830}
content:'<h1>John Dalton Foods</h1>'
},
{
coords:{lat:53.470493,lng:-2.238513}
content:'<h1>AllSaints Park</h1>'
},
{
coords:{lat:53.442371,lng:-2.201845}
content:'<h1>My Home</h1>'
}
];
// Loop through markers
for(var i = 0;i < markers.length;i++){
// Add marker
addMarker(markers[i]);
}
// Add Marker Function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
//icon:props.iconImage
});
// Check for customicon
if(props.iconImage){
// Set icon image
marker.setIcon(props.iconImage);
}
// Check content
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
});
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4mOCKmQe-ZovpqDeyvmTnrTK2Spcewzo-4M&callback=initMap">
</script>
</body>
</html>
为什么只显示标题而不显示地图使用标记，我该如何解决问题？
我尝试过：
YouTube教程，Stackoverflow论坛和javascript教程
Why is only displaying the title and not the map with the markers and how can I go about resolving the issue ?
What I have tried:
YouTube Tutorials, Stackoverflow forum and javascript tutorials
推荐答案
有一些隐藏的角色导致了问题。只需复制并粘贴下面的部分（你可能找不到差异但是这样做）。
There were some hidden characters which were causing an issue. Just copy and paste below piece (you may not find differences but do it).
// Array of markers
var markers = [
{
coords:{lat:53.470912,lng:-2.241365},
iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
content:'<h1>John Dalton East Carpark</h1>'
},
{
coords:{lat:53.471740,lng:-2.240842},
content:'<h1>John Dalton East Tower</h1>'
},
{
coords:{lat:53.472499,lng:-2.240830},
content:'<h1>John Dalton Foods</h1>'
},
{
coords:{lat:53.470493,lng:-2.238513},
content:'<h1>AllSaints Park</h1>'
},
{
coords:{lat:53.442371,lng:-2.201845},
content:'<h1>My Home</h1>'
}];
这篇关于在关注视频教程后，我的Google地图不会以chrome显示，需要帮助。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
