地圖未顯示在網頁上（Google Maps / Places API）

Question

這是我的第一個HTML / Javascript項目，遇到了一些麻煩。 目標是獲取地址，然后在該地址500m以內的商店中簡單地顯示帶有標記的地圖。 問題是我得到空白頁； 什么都沒有出現。 這些代碼大部分都是從Google的示例中逐字復制的，所以我不知道這可能是錯的。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Make a Good Impression</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=myKeyGoesHere"></script>    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
    <script type="text/javascript" src="coffee_and_donuts.js"></script>
  </head>
  <body>
      <div id="map" style="float:left;width:30%;height 100%"></div>
  </body>
</html>

coffee_and_donuts.js：

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var geocoder = new google.maps.Geocoder();
var DESTINATION_ADDRESS = "New York, New York";
var destination_LatLng;


// get the destination's LatLng object
geocoder.geocode( {'address': DESTINATION_ADDRESS}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK)
  {
      destination_LatLng = results[0].geometry.location;
  }
});


// feed the destination's LatLng object to the places API to find the nearest stores

var map;
var service;
var infowindow;

function initialize2() {
  map = new google.maps.Map(document.getElementById('map'), {
      center: destination_LatLng,
      zoom: 15
    });

  var request = {
    location: destination_LatLng,
    radius: '500',
    types: ['store']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

initialize2();

Answer 1

您需要調用initialize2(); 從您的地址解析函數回調中：

// get the destination's LatLng object
    geocoder.geocode( {'address': DESTINATION_ADDRESS}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK)
      {
          destination_LatLng = results[0].geometry.location;
          initialize2();
      }
    });

問題是您正在嘗試在地理編碼器完成之前初始化地圖。

您還可以將所有內容放在一個鏈接中：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>

地圖未顯示在網頁上（Google Maps / Places API）

問題描述

1 個解決方案

解決方案1
1 已采納 2014-10-27 00:18:18

地圖未顯示在網頁上（Google Maps / Places API）

問題描述

1 個解決方案

解決方案1 1 已采納 2014-10-27 00:18:18

解決方案1
1 已采納 2014-10-27 00:18:18