Question

我完全按照w3schools javascript教程，但我无法在我的简单网页上加载这些谷歌地图。请帮忙！相当新的JavaScript。我只是在这里输入更多内容来提高我的英语：stackoverflow的代码比率。

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="http://maps.googleapis.com/maps/api/js"></script>
  
  <script>
  function initialize(){
    var mapProp1 = {
    center: new google.maps.LatLng(69.336822, -44.218045),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var mapProp2 = {
    center: new google.maps.LatLng(39.336822, -84.218045),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  var map = new google.maps.Map(document.getElementById("map1"),mapProp1);
  var map2 = new google.maps.Map(document.getElementById("map2"),mapProp2);

  google.maps.event.addDomListener(window, 'load', initialize);
  
  </script>

  </head>

  
   <body>

    

       
      <div class="content-inner">
        <div id="map1"></div>
        <div id="map2"></div>

      </div>
    
    
  

     




     <footer>
    
     </footer>



    </body>
</html>

＆＃13;

Answer 1

如果您未在localhost上运行您的网站，则可能会遇到安全问题。我会考虑在项目的根目录中运行python -m SimpleHTTPServer。它应该启动localhost：8000的实例，允许您开发站点而不会遇到任何安全问题。显然有很多方法可以实现这一目标，但这很简单，可以帮助您入门。

Answer 2

这应该可以解决问题：

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="http://maps.googleapis.com/maps/api/js"></script>
  <script>
  function initialize(){
    var mapProp1 = {
    center: new google.maps.LatLng(39.336822, -84.218045),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var mapProp2 = {
    center: new google.maps.LatLng(39.336822, -84.218045),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  var map = new google.maps.Map(document.getElementById("map1"),mapProp1);
  var map2 = new google.maps.Map(document.getElementById("map2"),mapProp2);
  }
google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
   <body>
      <div class="content-inner">
        <div id="map1" style="width:500px;height:380px;"></div>
        <div id="map2" style="width:500px;height:380px;"></div>
      </div>
     <footer></footer>
    </body>
</html>

以下是JsBin

中的示例

Answer 3

你有三个问题：

您需要关闭初始化功能
您在mapProp2
您需要设置地图的大小

以下内容可以帮助您入门：

function initialize(){    
var mapProp1 = {
    center: new google.maps.LatLng(39.336822, -84.218045),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
    center: new google.maps.LatLng(39.336822, -84.218045),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }; // <-- the semicolon was missing
  var map = new google.maps.Map(document.getElementById("map1"),mapProp1);
  var map2 = new google.maps.Map(document.getElementById("map2"),mapProp2);
} //<-- this closing brace was missing

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



 <div class="content-inner">
    <!-- in production you should not use inline style. do this in css -->
    <div id="map1" style="height:300px;width:300px;"></div>
    <div id="map2" style="height:300px;width:300px;"></div>
  </div>

我无法使用google maps API来处理我的简单网页？

3 个答案: