javascript - API 中的 Google map 未显示

标签 javascript google-maps google-maps-api-3

由于某种原因,当我在浏览器中运行我的文件时,谷歌地图没有显示,它只是给出了一个空格。这是我的代码:

$(document).ready(function() {

  //google map 
  var map, geocoder;

  function initializeMap() {
    google.maps.event.addDomListener(window, 'load', function() {
      codeAddress('33 W 23rd St, New York, NY');
    });
  }

  function codeAddress(address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': address
      }, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
          var mapOptions = {
            zoom: 8,
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };

          map = new google.maps.Map($("#map").get(0), mapOptions);

          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
          });
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      )
    };
  }

  initializeMap();

});
#map {
  height: 300px;
  width: 800px;
  border: 1px solid black;
}
<html>

<head>
  <title>Title</title>

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

  <script src="test.js"></script>
</head>

<body>

  <div id="map"></div>

</body>

</html>

最佳答案

您的代码中有语法错误(放错位置的“)”)。工作代码片段:

$(document).ready(function() {

  //google map 
  var map, geocoder;

  function initializeMap() {
    google.maps.event.addDomListener(window, 'load', function() {
      codeAddress('33 W 23rd St, New York, NY');
    });
  }

  function codeAddress(address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status === google.maps.GeocoderStatus.OK) {
        var mapOptions = {
          zoom: 8,
          center: results[0].geometry.location,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map($("#map").get(0), mapOptions);

        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

  initializeMap();

});
#map {
  height: 300px;
  width: 800px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map"></div>

关于javascript - API 中的 Google map 未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33987227/

相关文章:

java - android 共享可点击的字符串 url 与指示谷歌地图

javascript - 谷歌地图 : Multiple Custom HTML Markers

javascript - Google map 适合自定义范围内的标记

javascript - JQuery Ajax Json 响应不起作用

google-maps - Jersey /根西岛的谷歌地图 API?

javascript - 在javascript中调用父属性和函数?

javascript - Google map API - 包含地点详细信息的信息窗口会自动打开,但没有内容

reactjs - react 谷歌地图 : Can't get bounds

javascript - 在 Symfony 2 上使用 Assetic 组合文件以仅对所有 CSS 文件进行一次调用

javascript - 在没有 jQuery 的情况下绑定(bind)输入并选择更改?