Googleマップの検索機能がカスタムボタンクリック（オートコンプリートなし）でどのようにトリガされるのですか？私はすでにこのコードを持っています...。Googleマップの検索機能がカスタムボタンでトリガする方法（オートコンプリートなし）
This exampleは、Googleプレイスのオートコンプリート機能を使用して、マップに検索ボックスを追加します。
人々は地理的な検索を入力できます。
検索ボックスは、場所と予測される検索語の組み合わせを含む選択リストを返します。
これは質問は少し判読できない私のサンプル、ボタン
var map;
var root;
var geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': 'Ha noi, Vietnam'}, function(results, status) {
\t \t \t \t root = results[0].geometry.location;
\t \t \t \t map = new google.maps.Map(document.getElementById('map'), {
\t \t \t \t zoom: 18,
\t \t \t \t center: root,
\t \t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP
\t \t \t \t }); \t
\t \t \t \t
\t \t \t \t
\t \t \t \t var center = {latLng: root, style: 'ae', content: 'md'};
\t \t \t \t var zoomControlDiv = document.createElement('div');
var zoomControl = new ZoomControl(zoomControlDiv, map);
zoomControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
\t \t \t \t
\t \t \t \t
\t \t \t \t
\t \t \t
\t \t \t });
}
function ZoomControl(controlDiv, map) {
// Creating divs & styles for custom zoom control
controlDiv.style.padding = '5px';
// Set CSS for the control wrapper
var controlWrapper = document.createElement('div');
controlDiv.appendChild(controlWrapper);
// Set CSS for the zoomIn
var txtAddress = document.createElement('input');
//zoomInButton.innerHTML = '<br><img src=images/Plus.png title="Zoom In">';
txtAddress.type="text";
controlWrapper.appendChild(txtAddress);
var bttAddress = document.createElement('input');
//zoomInButton.innerHTML = '<br><img src=images/Plus.png title="Zoom In">';
bttAddress.type = "button";
bttAddress.value= "Search";
controlWrapper.appendChild(txtAddress);
controlWrapper.appendChild(bttAddress);
google.maps.event.addDomListener(txtAddress, 'change', function() {
geocoder.geocode({'address': txtAddress.value}, function(results, status) {
if (status === 'OK') {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
\t \t \t title: txtAddress.value+' '+results[0].geometry.location
});
\t \t \t map.setCenter(results[0].geometry.location);
\t \t \t
\t \t \t
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
});
google.maps.event.addDomListener(bttAddress, 'click', function() {
geocoder.geocode({'address': txtAddress.value}, function(results, status) {
if (status === 'OK') {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
\t \t \t title: txtAddress.value+' '+results[0].geometry.location
});
\t \t \t map.setCenter(results[0].geometry.location);
\t \t \t
\t \t \t
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);<!DOCTYPE HTML>
<html>
<head>
<title>Google Maps API</title>
<style type="text/css">
#map {
\t width: 100%;
\t height: 600px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="init_map.js"></script>
</head>
<body>
\t <div id="map">
\t </div>
</body>
</html>
の 私はテキストボックスの「変更」イベントを使用し、「クリック」されているイベントです。読みやすいように言語をフォーマットできますか？ – Sid