如何在Google地图中为当地餐馆添加搜索框？

Question

我项目的快速摘要。我正在构建一个表格预订应用程序，现在，我已经开始使用谷歌地图，但它看起来像这样。

单个标记是故意的。

这是我在演讲期间使用的特殊餐厅的位置，所以很自然地，它意味着留在那里。

但是，您还会注意到显然没有搜索栏。每当我尝试将initAutoComplete函数放入地图中时，我的整个地图都会消失。我究竟做错了什么？这是我当前的代码（我最新的代码不会破坏地图）。

HTML

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

的Javascript

function renderRestaurantInfo(restaurant){
  return (
    "<h2>"+restaurant.title+"</h2>" +
    "<a href='/reservations/index'>Make a Reservation</a>"
  );  
}

function addMarkerToMap(restaurant,map){
  var marker = new google.maps.Marker({
    position: {lat: restaurant.lat, lng: restaurant.lng},
    map: map,
    title: restaurant.title
  }); 

  var infowindow = new google.maps.InfoWindow({
    content: renderRestaurantInfo(restaurant)
  }); 

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  }); 
}

function initMap(){
    var initialLocation = {lat: 39.9522334, lng: -75.1694917 };

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

    var restaurant = { 
        title: 'My Restaurant',
        lat: 39.9522334,
        lng: -75.1694917
    }
    addMarkerToMap(restaurant,map);
};

Answer 1

我相信你正在寻找/想到的是“地方搜索框”： https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

上面的链接应该会有所帮助。