地图不显示在网页上（谷歌地图/ Places API）

这是我的第一个HTML/Javascript项目，我遇到了一些麻烦。我们的目标是获得一个地址，并在该地址500米内的商店上简单地显示带有标记的地图。问题是我得到一个空白页面;什么也没有显示出来。这些代码大部分都是从谷歌的例子中逐字复制的，所以我不知道什么是错的。地图不显示在网页上（谷歌地图/ Places API）

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();

来源

2014-10-26 JamesGold

做一个小提琴，我可以帮忙 – 2014-10-26 23:50:28

我不知道这个工具。很酷。 http://jsfiddle.net/8hga1h52/ – JamesGold 2014-10-26 23:53:12

插入你的API密钥 – 2014-10-26 23:54:05

你需要调用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>

来源

2014-10-27 00:18:18

谢谢，这是有道理的。虽然地图仍然没有渲染。 – JamesGold 2014-10-27 00:23:49

你也不能使用浮动div的100％高度，除非你给它的容器增加一个高度，把它设置为600px或者其他东西，它应该显示 – 2014-10-27 00:25:12

它就是这样。谢谢！ – JamesGold 2014-10-27 00:26:51

地图不显示在网页上（谷歌地图/ Places API）

回答

相关问题