GoogleマップAPIの検索ボックス - インフォボックスデータベースリンクと統合

Question

私はこれでnewbyです。この質問は非常にあなたの多くに簡単ですが、助けてください。

私は非常に単純なGoogleマップスクリプト内の検索ボックスをintergrateしようとしています。

1ここからファイルをコピーしました：From Info Windows to a Database: Saving User-Added Form Data これは正常に動作しました。

今、私は既存のコードにsearchbox機能を追加しようとしています。 基本的には、これを前のコードにPlace Search Box に統合したいと思います。

これにより、DBに特定の場所を追加する前に場所（都市）を検索できるようになります。

ありがとうございました！

Answer 1

あなたはこのようなものを設定することができます。

1. は、検索場所を実装します。
2. 重要なデータ（名前、住所、種類）を取得すると、情報ウィンドウにこのデータが自動的に入力されます。
3. DBのデータを編集/保存します。

コード：

// 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からの項目応答のリストです。