Google Map Geolocationとビジネスタイプを表示

まずは、皆が私を助けてくれることに感謝し、私が開発の初心者だと言いたいと思います。Google Map Geolocationとビジネスタイプを表示

私はのGoogleマップを設定しようとしています。ジオラカリズム付きのGoogleマップでは、レンタカーのタイプが「」のマーカーのみが表示されています。アイデアは、私のウェブページの訪問者がサイトに入ると、マップは訪問者の位置をgeolocalizeし、マップは近くのレンタカーの場所のみを表示するということです。

私はgeolocalizationのGoogleのコードだ：

<div id="map" style="width: 100%; height: 500px;"></div> 
<script> 
    // Note: This example requires that you consent to location sharing when 
    // prompted by your browser. If you see the error "The Geolocation service 
    // failed.", it means you probably did not give permission for the browser to 
    // locate you. 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 6 
    }); 
    var infoWindow = new google.maps.InfoWindow({map: map}); 

    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }; 

     infoWindow.setPosition(pos); 
     infoWindow.setContent('Location found.'); 
     map.setCenter(pos); 
     }, function() { 
     handleLocationError(true, infoWindow, map.getCenter()); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleLocationError(false, infoWindow, map.getCenter()); 
    } 
    } 

    function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
          'Error: The Geolocation service failed.' : 
          'Error: Your browser doesn\'t support geolocation.'); 
    } 
</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=[MYAPIKEY]&callback=initMap"> 
</script>

をそして、それが正常に動作しますが、今、私は場所や種類について読んでいると私は成功しません。

誰も私を助けることができますか？

事前に感謝します。

ジョルディV. CarRentals.Deals

出典

2017-10-19 Car Rental Deals

GoogleプレイスのJavaScriptライブラリの関数（施設、地理的位置、または関心の著名なポイントとして、このAPIで定義されている）内に含まれる場所を検索するようにアプリケーションを可能にしますマップの境界や固定小数点の周りなどの、定義済みの領域です。

GoogleプレイスAPIには、Googleマップの検索フィールドの先行検索機能をアプリケーションに提供するためのオートコンプリート機能があります。ユーザーが住所の入力を開始すると、残りの部分にオートコンプリートが入力されます。詳細については、autocomplete documentationを参照してください。

私の例では、私はを使用しました。近くの検索 - キーワードまたはタイプで指定されたエリア内の場所を検索できます。 PlacesServiceのNearbySearch（）メソッドを使用して、PlaceResultオブジェクトの配列を返します。詳細については、thisリンクを確認することができます。さて、コードの内訳を見てみましょう。

var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch({ 
        location: location, 
        radius: 500, 
        type: ['car_rental'] 
}, callback);

プロパティ 'bounds'または 'location'を使用できます。ここでは、 'location'を使用しています。「場所」を使用している場合は、「半径」プロパティも指定する必要があります。最大許容半径は50,000メートルです。また、 'type'プロパティも使用しました。指定された型に一致する場所に結果を制限します。指定できるタイプは1つだけです（複数のタイプが指定されている場合、最初の入力に続くすべてのタイプは無視されます）。 list of supported typesを参照してください。

コールバック関数は2つの引数を受け取ります。結果とステータス。独自の引数名を付けることができます。この（コールバック）は、 'status'引数が大丈夫なら実行したいコードを追加する場所です。コールバック関数：

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

});

結果に問題がない場合、返される値は配列であるので、あなたはそれぞれの配列を反復処理し、Googleマーカーとしてそれらを表示する必要があります。 Googleマーカーについて詳しくは、thisをご覧ください。ここでcreateMarker関数の定義を以下に示します。ここ

function createMarker(place, map) { 
    var placeLoc = place.geometry.location; 
    infowindow = new google.maps.InfoWindow(); 
    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); 
    }); 
}

完全なコード：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title></title> 
    <style> 
    html,body,#map { 
     width:100%; 
     height:100%; 
    } 
    </style> 
</head> 
<body> 
<div id="map"></div> 
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places"> 
</script> 
<script> 
function initMap() { 
var map; 
var infowindow; 
// Try HTML5 geolocation. 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(function(position) { 
var pos = { 
lat: position.coords.latitude, 
lng: position.coords.longitude 
}; 
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
map = new google.maps.Map(document.getElementById('map'), { 
    center:location, 
    zoom: 12 
}); 
var service = new google.maps.places.PlacesService(map); 
service.nearbySearch({ 
location: location, 
radius: 500, 
type: ['car_rental'] 
}, function(results, stat){ 
if (stat === google.maps.places.PlacesServiceStatus.OK) { 
for (var i = 0; i < results.length; i++) { 
var place = results[i]; 
createMarker(results[i], map);   
}   
}  
});  
}); 
} else { 
alert("Browser doesn't support Geolocation"); 
} 
} 
function createMarker(place, map) { 
var placeLoc = place.geometry.location; 
infowindow = new google.maps.InfoWindow(); 
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); 
}); 
}  
</script> 
</body> 
</html>

作業するデモhere。

希望すると助かります！

出典

2017-10-23 08:13:56 rafon

こんにちは、ありがとうございます。完璧な作品！それが他の人に役立つことを願っています非常に敬具。 –

私の答えがあなたを助けたら、それを受け入れるのですか？ありがとう:) – rafon

Google Map Geolocationとビジネスタイプを表示

答えて

関連する問題