Google Places Autocomplete API Multiple Instances

问题

I've got a problem with my site. I use autocomplete to find the lat long of an address before submitting to a form. The problem is, on the page where I have 2 instances, I get an error in Chrome "'geometry' is null or not an object" and the first instance will not get the latlon.

if($('input#searchArea').length){
        var input = document.getElementById('searchArea');
        var options = {
            componentRestrictions: {country: 'uk'}
        }
        var autocomplete = new google.maps.places.Autocomplete(input, options);

        google.maps.event.addListener(autocomplete, 'place_changed', function(){
            var place = autocomplete.getPlace();
            var location = String(place.geometry.location); // The problemed line
            var latLong = location.substr(1, location.length-2);
            latLong = latLong.split(', ');
            if($('input#searchLatLong').length == 0) $('form#findArea').append('<input type="hidden" name="ll" id="searchLatLong" />');
            $('input#searchLatLong').val(latLong[0] + ',' + latLong[1]);
        });
    }

    if($('input#letArea').length){
        var input = document.getElementById('letArea');
        var options = {
            componentRestrictions: {country: 'uk'}
        }
        autocomplete = new google.maps.places.Autocomplete(input, options);

        google.maps.event.addListener(autocomplete, 'place_changed', function(){
            var place = autocomplete.getPlace();
            var location = String(place.geometry.location);
            var latLong = location.substr(1, location.length-2);
            latLong = latLong.split(', ');
            if($('input#letLatLong').length == 0) $('form#letPlaceArea').append('<input type="hidden" name="ll" id="letLatLong" />');
            $('input#letLatLong').val(latLong[0] + ',' + latLong[1]);
        });
    }

Has anyone come across this before?

Cheers, RJ

EDIT: Problem found. It was the variables being named the same. Changing them on the second instance sorted it.

Cheers, RJ

回答1:

Problem found. It was the variables being named the same. Changing them on the second instance sorted it.

回答2:

I don't know if this is the best way to solve this problem, but I have done this:

function initialize() {
    var input = document.getElementById('searchTextField');
    var options = {
        types: ['(cities)']
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);
    }
    google.maps.event.addDomListener(window, 'load', initialize);


function initialize1() {
    var input = document.getElementById('searchTextFieldedit');
    var options = {
        types: ['(cities)']
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);
    }
    google.maps.event.addDomListener(window, 'load', initialize1);

Hope this help to you, Best Regards

回答3:

function initialize(pre) {
  window[pre+"autocomplete"] = new google.maps.places.Autocomplete(
      (document.getElementById(pre+'street_address')),
      { types: ['geocode'] });
  google.maps.event.addListener(window[pre+"autocomplete"], 'place_changed', function() {
    fillInAddress(pre);
  });
}

function fillInAddress(pre) {

    var place = window[pre+"autocomplete"].getPlace();

    for (var component in componentForm) {
      document.getElementById(pre+component).value = '';
      document.getElementById(pre+component).disabled = false;
    }

    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
          var val = place.address_components[i][componentForm[addressType]];
          jQuery("#"+pre+addressType).val(val);
        }
    }
    updateStreet("#"+pre)
}

And of course, you need to initiate twice via either jQuery or onload();

jQuery(function() {
  initialize("foo_")
  initialize("bar_")
});

来源：https://stackoverflow.com/questions/12122175/google-places-autocomplete-api-multiple-instances