谷歌地图自动完成不能在2页工作（2不同的形式） [英] Google Maps Autocomplete doesn't work on 2 pages (2 different forms)

问题描述

下面是谷歌自动完成的设置：

Here's the setup of Google Autocomplete:

    <script type="text/javascript">
      function initialize() {       

        var from1_input = document.getElementById('autocomplete_from1'); // website.com/page1
        var to1_input   = document.getElementById('autocomplete_to1');   // website.com/page1         
        var from2_input = document.getElementById('autocomplete_from2'); // website.com/page2
        var to2_input   = document.getElementById('autocomplete_to2');   // website.com/page2

        var autocomplete_from1_input = new google.maps.places.Autocomplete(from1_input); // website.com/page1 
        var autocomplete_to_1_input  = new google.maps.places.Autocomplete(to1_input);   // website.com/page1
        var autocomplete_from2_input = new google.maps.places.Autocomplete(from2_input); // website.com/page2
        var autocomplete_to2_input   = new google.maps.places.Autocomplete(to2_input);   // website.com/page2            
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

问题是，形式是关于 /第1页运作良好，但在 / 2页自动完成功能不能正常工作。

The problem is that the form is on the /page1 is working well, but on the /page2 the autocomplete doesn't work.

我已经尝试删除的JavaScript在第1页并自动完成谷歌运作良好那里，所以这意味着自动完成工作无论是在第1页或在第2页上都，但可惜现在。

I've try to delete the javascript for the page1 and Google autocomplete is working well there, so it means that the Autocomplete is working either on the page1 or on the page2, but unfortunately now on both.

的ID是正确的。

这是为什么？有没有从谷歌的结尾任何限制或做我忽略的东西吗？

Why is that? Is there any restriction from Google's end or do I overlook something?

感谢你们。

编辑：

<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,geometry" %>

被包括在报头

推荐答案

所以，你必须与输入的页面＃autocomplete_from1 和＃autocomplete_to1 并输入另一个页面＃autocomplete_from2 和＃autocomplete_to2 ？

So you have a page with the inputs #autocomplete_from1 and #autocomplete_to1 and another page with the inputs #autocomplete_from2 and #autocomplete_to2 ?

浏览器阻止脚本的运行，当你在第2页这里发生错误：

Browsers stop the script-execution when an error occurs, when you are in page2 the error occurs here:

var autocomplete_from1_input = new google.maps.places.Autocomplete(from1_input);

...因为输入不存在，下面的语句将不被执行。

...because the input doesn't exist, the following statements will not be executed.

您必须避免这种错误。有不同的可能的解决方案，例如一个try / catch语句

You must avoid this error. There are different possible solutions, e.g. a try/catch-statement

function initialize() {       

   //try to run the code for page1
 try{
    var from1_input = document.getElementById('autocomplete_from1'); 
    var to1_input   = document.getElementById('autocomplete_to1');  
    var autocomplete_from1_input = new google.maps.places.Autocomplete(from1_input); 
    var autocomplete_to_1_input  = new google.maps.places.Autocomplete(to1_input);   
   }
   //in case of an error run code for page2
 catch(e){
    var from2_input = document.getElementById('autocomplete_from2'); 
    var to2_input = document.getElementById('autocomplete_to2');   
    var autocomplete_from2_input = new google.maps.places.Autocomplete(from2_input); 
    var autocomplete_to2_input = new google.maps.places.Autocomplete(to2_input);   
   }
}

这篇关于谷歌地图自动完成不能在2页工作（2不同的形式）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！