автозаполнения Google не работает на странице 2

HTMLавтозаполнения Google не работает на странице 2

<input id="location_input" type="text" name="location" value="" placeholder="Location" class="0 text-center" style="width:200px;margin:0 auto;" required>

SCRIPT

<script> 
function initMap() { 
    var input = /** @type {!HTMLInputElement} */(
     document.getElementById('location_input')); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
    var infowindow = new google.maps.InfoWindow(); 
    var geocoder = new google.maps.Geocoder(); 
    autocomplete.addListener('place_changed', function() { 
    infowindow.close(); 
    var place = autocomplete.getPlace(); 
    if (!place.geometry) { 
     window.alert("Autocomplete's returned place contains no geometry"); 
     return; 
    } 
    var address = ''; 
    if (place.address_components) { 
     address = [ 
     (place.address_components[0] && place.address_components[0].short_name || ''), 
     (place.address_components[1] && place.address_components[1].short_name || ''), 
     (place.address_components[2] && place.address_components[2].short_name || '') 
     ].join(' '); 
    } 
    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
    }); 

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

function geocodeAddress(geocoder) { 
    var address = document.getElementById('location_input').value; 
    geocoder.geocode({'address': address}, function(results, status) { 
    if (status === google.maps.GeocoderStatus.OK) { 
    //alert('Geocode was successful: ' + results[0].geometry.location); 
    //function to call php to submit form. 
    } else { 
    // alert('Please try a broader location instead' + status); 
    } 
    }); 
} 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmjFZ2NOW5-lGO9U2Wjlzt5-ekLANM8S0&signed_in=true&libraries=places&callback=initMap" 
     async defer></script>

То же HTML и сценарий я поместил в странице 2, но не перекрывают автозаполнения здесь. Поэтому я изменил идентификатор здесь от location_input до location_input2 по HTML и скрипту, но он не работает.

Я не понимаю, почему он работает на стр. 1, но не на стр. 2. Я даже попытался отключить скрипт на стр. 1, чтобы увидеть, влияет ли это на страницу2, но никаких изменений не было сделано. Я также упомянул here https://stackoverflow.com/questions/26317161/google-maps-autocomplete-doesnt-work-on-2-pages-2-different-forms. Но ничего не помогает.

СТР 2

HTML

<input id="location_input2" type="text" name="location" value="" placeholder="Location" class="0 text-center" style="width:200px;margin:0 auto;" required>

SCRIPT

<script> 
function initMap() { 
    var input = /** @type {!HTMLInputElement} *///(
    document.getElementById('location_input2')); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
    var infowindow = new google.maps.InfoWindow(); 
    var geocoder = new google.maps.Geocoder(); 
    autocomplete.addListener('place_changed', function() { 
    infowindow.close(); 
    var place = autocomplete.getPlace(); 
    if (!place.geometry) { 
     window.alert("Autocomplete's returned place contains no geometry"); 
     return; 
    } 
    var address = ''; 
    if (place.address_components) { 
     address = [ 
     (place.address_components[0] && place.address_components[0].short_name || ''), 
     (place.address_components[1] && place.address_components[1].short_name || ''), 
     (place.address_components[2] && place.address_components[2].short_name || '') 
     ].join(' '); 
    } 
    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
    }); 

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

function geocodeAddress(geocoder) { 
    var address = document.getElementById('location_input2').value; 
    geocoder.geocode({'address': address}, function(results, status) { 
    if (status === google.maps.GeocoderStatus.OK) { 
    //alert('Geocode was successful: ' + results[0].geometry.location); 
    //function to call php to submit form. 
    } else { 
     //alert('Please try a broader location instead' + status); 
    } 
    }); 
} 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmjFZ2NOW5-lGO9U2Wjlzt5-ekLANM8S0&signed_in=true&libraries=places&callback=initMap" 
     async defer></script>

источник

2015-12-22 112233

Прежде всего, лучшей практикой является не разделять ключ АФИ в общественном в форумах. Во-вторых, в вашем запросе, я считаю, должен быть второй инициализации для нового ввода если страница не обновляется в стороне сервера. Если вы играете с php-страницами, это будет хорошо работать на второй странице. Если нет, пожалуйста, инициализируйте второе текстовое поле на другом id и возьмите этот идентификатор для инициализации функции с помощью jQuery. как:

$('.firstTextbox).click(//call init for first); 
$('.secondTextbox).click(//call init for second);

Надежда теория часть теперь ясно для вас. Я могу вам помочь, если вы можете поделиться своим кодом второй страницы.

источник

2015-12-22 09:44:18

разместил код со страницы 2 – 112233

@Keren призывающих сценарий снова и снова сделает сервер google заблокирует ваш второй вызов, Итак, вам нужно динамически переключаться между каждым текстовым полем, используя тот, который вы нажимаете, а затем вызываете init из этой функции щелчка. –

Я сделал это, разместив его на нижнем колонтитуле вместо отдельной страницы, где он будет делиться одним и тем же идентификатором, и только один скрипт под названием – 112233

Я только что удалили лишние слеши от вас код и он работает для меня ..

var input = /** @type {!HTMLInputElement} */(

Попробуй ..

источник

2015-12-22 09:52:40

попробовал, он не работает на странице2, но page1 делает – 112233

автозаполнения Google не работает на странице 2

ответ

Смежные вопросы