谷歌地圖API中的搜索框 - 與信息數據庫鏈接集成

Question

我是一個newby在這和這個問題可能很簡單，你很多，但請幫助。

我想在一個非常簡單的谷歌地圖腳本內整合搜索框。

1-我成功地從這裏複製了該文件：From Info Windows to a Database: Saving User-Added Form Data 已配置，它的工作原理非常好！

現在我試圖將搜索框功能添加到現有的代碼。 基本上，我想把這個：Place Search Box 整合到前面的代碼中。

這將使我能夠在將特定位置添加到我的數據庫之前搜索地點（城市）。

謝謝！

Answer 1

您可以設置這樣的事情：

1. 實現搜索的地方。
2. 獲取重要數據（名稱，地址，類型）會自動使用此數據填充信息窗口。
3. 在數據庫中編輯/保存數據。

代碼：

// Create a marker for each place. 
markers.push(new google.maps.Marker({ 
map: map, 
icon: icon, 
title: place.name, 
position: place.geometry.location 
})); 

然後從你的鏈接添加自定義信息窗口/調整一些值的形式，得到了地方搜索的結果。

var html = "<table>" + 
"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" + 
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" + 
"<tr><td>Type:</td> <td><select id='type'>" + 
"<option value='bar' SELECTED>bar</option>" + 
"<option value='restaurant'>restaurant</option>" + 
"</select> </td></tr>" + 
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>"; 
infowindow = new google.maps.InfoWindow({ 
content: html 
}); 

google.maps.event.addListener(map, "click", function(event) { 
marker = new google.maps.Marker({ 
position: event.latLng, 
map: map 
}); 
google.maps.event.addListener(marker, "click", function() { 
infowindow.open(map, marker); 
}); 
}); 
} 

以下是來自places details的項目響應列表。