简单的谷歌地图不使用外部css和javascript文件_Javascript_Html_Css_Google Maps

简单的谷歌地图不使用外部css和javascript文件

javascript html css google-maps

简单的谷歌地图不使用外部css和javascript文件,javascript,html,css,google-maps,Javascript,Html,Css,Google Maps,我已经按照指南在html页面中设置了最基本的google地图视图，但是我无法让地图显示出来。我知道这一定很简单，我已经尝试了很多修复，但它似乎不适用于链接css和js。请注意，当我在一个页面中使用代码时，它可以工作，没有链接，但当我使用外部CSS和JS时，它不能工作。这是我的html： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" src="css

我已经按照指南在html页面中设置了最基本的google地图视图，但是我无法让地图显示出来。我知道这一定很简单，我已经尝试了很多修复，但它似乎不适用于链接css和js。请注意，当我在一个页面中使用代码时，它可以工作，没有链接，但当我使用外部CSS和JS时，它不能工作。这是我的html：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" src="css/mapstyle.css">
  </head>
  <body>
    <div id="map"></div>
    <script src="js/map.js">
    </script>

    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUA3LnXH-B5z9GlGh_Gyrebh-xpQoYQMY&callback=initMap">
    </script>

  </body>
</html>

CSS:

这里是fiddle:

加载页面时需要调用

initMap（）

函数，如（如果使用JQuery）：

在

map.js

之前添加

script

的

googlemap

。因为它需要在你的

js

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script‌> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUA3LnXH-B5z9GlGh_Gyrebh-‌xpQoYQMY> </script>
    <script src="js/map.js"></script> 

    <link rel="stylesheet" type="text/css" src="css/mapstyle.css"> 
</head> 
<body>
    <div id="map"></div>
</body> 
</html>


在javascript控制台中，我发现一个错误：uncaughttypeerror:window.initMap不是一个函数
。这是因为initMap
函数被包装在窗口.onload
函数中，并且是本地函数，因此它不能作为API的回调例程全局可用
要修复它，请将fiddle中的“Frameworks&Extensions”设置为“No Library（purejs）”和“No wrap-in

请注意，您发布的代码中有一个输入错误：
<link rel="stylesheet" type="text/css" src="css/mapstyle.css">

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

尝试将此添加到代码中。但不起作用。这可能是因为我的链接不正确。css和js在单独的文件中，我已将它们链接到html中，如上所示。是否正确？您需要将jquery
库添加到您的
标记中：
我也尝试过，但不起作用。我知道这看起来很愚蠢，但h这是我的html代码，js和css和你的小提琴一样。有什么问题吗？也尝试过，使用了完全相同的代码，上帝不知道为什么它不工作。所以我从interent复制了另一个代码并编辑它以满足我的要求。虽然它在它在小提琴中工作得很好。无论如何，谢谢你的帮助。如果你有任何建议，请让我知道，因为我打算在我有空的时候进一步探讨这个问题。如果我只使用pureJs，我怎么能在网站中使用jquery？我需要jquery来实现其他功能。没有理由你也不能包含jquery，发布的代码不需要它。
var map;

$(document).ready(function(){
    initMap();
});

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

    document.add
}

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script‌> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUA3LnXH-B5z9GlGh_Gyrebh-‌xpQoYQMY> </script>
    <script src="js/map.js"></script> 

    <link rel="stylesheet" type="text/css" src="css/mapstyle.css"> 
</head> 
<body>
    <div id="map"></div>
</body> 
</html>

<link rel="stylesheet" type="text/css" src="css/mapstyle.css">

<link rel="stylesheet" type="text/css" href="css/mapstyle.css">