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

【问题标题】：How do I add a search box in my Google Maps for local restaurants?如何在我的 Google 地图中为当地餐馆添加搜索框？
【发布时间】：2016-01-14 05:15:20
【问题描述】：

我的项目的快速摘要。我正在构建一个餐桌预订应用程序，现在我可以使用 Google 地图，但它看起来像这样。

单个标记是故意的。

那是我将在演示过程中使用的一家特殊餐厅的位置，所以自然而然地，它就应该留在那里。

但是，您也会注意到显然没有搜索栏。每当我尝试将 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);
};

【问题讨论】：

标签： javascript ruby-on-rails google-maps google-places-api

【解决方案1】：

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

上面的链接应该很有帮助。

【讨论】：