Django。 Google Place Autocomplete Address Form

私は、テンプレート内にユーザーが住所を入力できるフォームを持っています。 Google APIを使用して「Place Autocomplete Address」を適用したいDjango。 Google Place Autocomplete Address Form

ただし、何らかの理由により、オートコンプリート機能がフォームで機能しません。どんな助言も成されるでしょう。ありがとうございました。あなたのコールバックで

Forms.py

where_load = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'id':"autocomplete"})) 
where_unload = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'id':"autocomplete"}))

のHTMLテンプレート

<head> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={API_KEY}&libraries=places&callback=initAutocomplete" async defer></script> </haed> 

<body> 
.... 
<div class="col-sm-37"> 
    {{form.where_load|as_crispy_field}} 
</div> 
<div class="col-sm-37"> 
    {{form.where_unload|as_crispy_field}} 
</div> 
<script> 
    // This example displays an address form, using the autocomplete feature 
    // of the Google Places API to help users fill in the information. 
    var placeSearch, autocomplete; 

    function initAutocomplete() { 
     // Create the autocomplete object, restricting the search to geographical 
     // location types. 
     autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
      {types: ['geocode']}); 

     // When the user selects an address from the dropdown, populate the address 
     // fields in the form. 
     autocomplete.addListener('place_changed', fillInAddress); 
    } 

    // [START region_geolocation] 
    // Bias the autocomplete object to the user's geographical location, 
    // as supplied by the browser's 'navigator.geolocation' object. 
    function geolocate() { 
     if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
      var geolocation = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
      }; 
      var circle = new google.maps.Circle({ 
      center: geolocation, 
      radius: position.coords.accuracy 
      }); 
      autocomplete.setBounds(circle.getBounds()); 
     }); 
     } 
    } 
    // [END region_geolocation] 
</script> 
</body>

出典

2016-08-18 smchae

apiキーを非表示にすることはできますか？ –

、あなたがオートコンプリートを適用し、そこにオートコンプリートを宣言したい要素を見つけます。また、以下のようにテンプレートにAPIキーをロードすることもできます。

<script> 
    var onLoaded = function() { 
     // I am assuming your field has id of where_load, it might be different 
     var location_input = document.getElementById('where_load'); 
     var autocomplete = new google.maps.places.Autocomplete(location_input); 

    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key={{api_key}}&libraries=places&callback=onLoaded" async defer></script>

出典

2016-08-24 14:12:18 theShobster

Django。 Google Place Autocomplete Address Form

答えて

関連する問題