近くの場所検索で返された結果をカスタマイズする方法、Google Maps JS API V3

Google Maps APIとJSでは比較的新しいので、これは（おそらく）には簡単な答えがあるかもしれません。近くの場所検索で返された結果をカスタマイズする方法、Google Maps JS API V3

私の位置がである特定の半径内のすべての場所を返すようになっていますが、プラント保育園、燃料ステーション、ジムなどの具体的なものにしたいだけです。事前に https://jsbin.com/yodolexece/edit?html,js,output

感謝を好む場合はロングコードブロックについては申し訳ありません

は、ここにJSBinです。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Locator</title> 

    <script type="text/javascript"  
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdodiLO598_RD8_NYXK7nBKNA9Fhx_uBQ&libraries=places,geometry&.js"></script> 

    <script 
     src="https://code.jquery.com/jquery-3.1.1.js" 
     integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" 
     crossorigin="anonymous"></script> 
    </head> 
    <body> 
     <input id="findMe" type="button" value="find closest place"> 
     <div id="map-canvas" style="height:500px;"></div> 
    </body> 
    </body> 
    </html>

JS：

<script> 
jQuery(function($) { 
var $overlay = $('.overlay'), 
    resize = true, 
    map; 
var service; 
var marker = []; 
var pos; 
var infowindow; 
var placeLoc 

function initialize() { 
    var mapOptions = { 
    zoom: 15 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

    // Try HTML5 geolocation 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
     $('#findMe').data('pos', pos); 
     var request = { 
     location: pos, 
     radius: 1000, 
     }; 
     infowindow = new google.maps.InfoWindow(); 
     var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch(request, callback); 
     infowindow = new google.maps.InfoWindow({ 
     map: map, 
     position: pos, 
     content: 'You Are Here' 
     }); 
     map.setCenter(pos); 
    }, function() { 
     handleNoGeolocation(true); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleNoGeolocation(false); 
    } 

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

function createMarker(place) { 
    placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
    map: map, 
    type: ['store'], 
    position: place.geometry.location, 
    icon: { 
     path: google.maps.SymbolPath.CIRCLE, 
     scale: 8, 
     fillColor: '00a14b', 
     fillOpacity: 0.3, 
     fillStroke: '00a14b', 
     strokeWeight: 4, 
     strokeOpacity: 0.7 
    }, 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
    }); 
    return marker; 
} 

function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
    var content = 'Error: The Geolocation service failed.'; 
    } else { 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
    map: map, 
    position: new google.maps.LatLng(60, 105), 
    content: content 
    }; 
    var infowindow = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

$('#show').click(function() { 
    $overlay.show(); 
    if (resize) { 
    google.maps.event.trigger(map, 'resize'); 
    resize = false; 
    } 
}); 

$('.overlay-bg').click(function() { 
    $overlay.hide(); 
}); 

$("#findMe").click(function() { 
    var pos = $(this).data('pos'), 
    markers = $(this).data('markers'), 
    closest; 
    if (!pos || !markers) { 
    alert('pos or markers not set yet'); 
    return; 
    } 
    $.each(markers, function() { 
    var distance = google.maps.geometry.spherical.computeDistanceBetween(this.getPosition(), pos); 
    if (!closest || closest.distance > distance) { 
     closest = { 
     marker: this, 
     distance: distance 
     } 
    } 
    }); 
    if (closest) { 
    google.maps.event.trigger(closest.marker, 'click') 
    } 
}); 
}); 
</script>

出典

2016-10-30 Devin Norgarb

その非常に簡単。リクエストを編集するために必要なタイプの配列を、types to filterという新しい属性で渡す必要があります。例種類：[「銀行」、「ジム」]以下

コードブロックと私はタイプが

以下のリンクから見つけることができますJSビン

JS Bin

場所の修正版を添付します

Place Types

GoogleプレイスAPIドキュメント - developers.google.com/maps/documentation/javascript/places#place_search_requests

var request = { 
      location: pos, 
      radius: 1000, 
      types: ['bank', 'gym'] 
      }; 
      infowindow = new google.maps.InfoWindow(); 
      var service = new google.maps.places.PlacesService(map); 
      service.nearbySearch(request, callback);

出典

2016-10-30 10:27:56

私はあなたに十分に感謝することはできませんが、それは簡単だと思ったが、簡単だったそれは超簡単だった。あなたは私の週末を作った。 –

問題ありません。お手伝いできます。 –

近くの場所検索で返された結果をカスタマイズする方法、Google Maps JS API V3

答えて

関連する問題