HTML - Javascript - ジオコーディングと近隣検索を組み合わせる

Question

Googleジオコーディングと近隣検索を1つの検索ボックスに組み合わせようとしています。

ユーザーが住所を入力すると、地図には近くにあるすべてのバーが表示されます。

initmap機能：

function initMap() { 
    var setMap = new google.maps.LatLng(50, 9398252, 6.93936825); 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: setMap 
    }); 

    var request = { 
     location: setMap, 
     radius: '5000', 
     types: ['bar'] 
    }; 

    var geocoder = new google.maps.Geocoder(); 

    document.getElementById('submit').addEventListener('click', function() { 
     geocodeAddress(geocoder, map); 
    }); 

} 

これは私のジオコード機能である：

function geocodeAddress(geocoder, resultsMap) { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({ 'address': address }, function(results, status) { 
     if (status === 'OK') { 
      resultsMap.setCenter(results[0].geometry.location); 

     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
} 

これは私がマーカーを作成する方法を次のとおりです。

function callback(results, status) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 
      createMarker(results[i]); 
     } 
    } 
} 

function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(place.name); 
     infowindow.open(map, this); 
    }); 
} 

そしてここでは、私の検索ボックスが見えるものですlike：

<form class="navbar-form navbar-left"> 
    <div class="form-group"> 
     <div id="floating-panel"> 
      <input id="address" type="textbox" value="Cologne, Germany" class="form-control"> 
      <input id="submit" type="button" value="Search" class="form-control"> 
     </div> 
    </div> 
</form> 

これまでは住所を検索できるため、ジオコーダが機能するはずです。 私は近くの検索プロセスを自分のコードに組み込む方法を知りません。 うまくいけば、誰かが私の問題を助けてくれることを願っています。

Answer 1

ジオコーディングAPIの結果を受け取ったら、PlacesService APIを呼び出すことができます。 APIへの呼び出しがすべて非同期であることがわかっているので、GeocodingコールバックがPlaceService APIを起動するまで待つ必要があります。

それは次のようになります。

function geocodeAddress(geocoder, resultsMap) { 
    var address = document.getElementById('address').value; 
    var service; 
    geocoder.geocode({'address': address}, function(results, status) { 
     if (status === 'OK') { 
      resultsMap.setCenter(results[0].geometry.location); 
      service = new google.maps.places.PlacesService(resultsMap); 
      service.nearbySearch({ location: results[0].geometry.location, radius: 500, type: [ 'bar' ] }, PlaceServiceCallBack); // where PlaceServiceCallBack handles the markers creation 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
}