Erratic results with modified example

Question

I'm using a very slightly modified version of an API example, I have a function called venueset() which I call to create the inputs I want for my form, the problem is the API doesn't seem to always load. Sometime the autocomplete function will work and the 'autocomplete' field will work as it's supposed to and other times the 'autocomplete' field will just be a normal text box with no apparent API functionality. If anyone could give me a little bit of direction as to why it sometimes works and other times doesn't I'd be most grateful. Thanks.

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/common.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/util.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/controls.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/places_impl.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/stats.js"></script>
</head>
    <body>

    <?php

        function venueset()
        {
            echo '
        <div id="locationField">
      <input id="autocomplete" placeholder="Enter venue" onfocus="geolocate()" type="text" name="venue" autocomplete="off">
    </div>

    <div id="address">
          <input type="hidden" class="field" name="name" id="business" disabled="true">
          <input type="hidden" class="field" name="number" id="street_number"  disabled="true">
          <input type="hidden" class="field" name="street" id="route" disabled="true">
          <input type="hidden" class="field" name="city" id="locality" disabled="true">
          <input type="hidden" class="field" id="administrative_area_level_1" disabled="true">
          <input type="hidden" class="field" name="postcode" id="postal_code" disabled="true">
          <input type="hidden" class="field" name="country" id="country" disabled="true">
    </div>
    ';
    }

    ?>
    <!-- Replace the value of the key parameter with your own API key. -->
    <script>
      function initAutocomplete() {
        var input = document.getElementById('autocomplete');
        var options = {
          types: ['geocode', 'establishment']
        };
        autocomplete = new google.maps.places.Autocomplete(input, options);

        autocomplete.addListener('place_changed', fillInAddress);

      };

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }
        document.getElementById("business").value = place.name;
        document.getElementById("business").disabled = false;
        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        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]];
            document.getElementById(addressType).value = val;
          }
        }
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;callback=initAutocomplete" async="" defer=""></script>
        <script type="text/javascript">
            // This example displays an address form, using the autocomplete feature
    // of the Google Places API to help users fill in the information.

    // This example requires the Places library. Include the libraries=places
    // parameter when you first load the API. For example:
    // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

    var placeSearch, autocomplete;
    var componentForm = {
      street_number: 'short_name',
      route: 'long_name',
      locality: 'long_name',
      administrative_area_level_1: 'short_name',
      country: 'long_name',
      postal_code: 'short_name'
    };



    // 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());
        });
      }
    }
        </script>
    </body></html>
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=api_key_removed&libraries=places&callback=initAutocomplete"
            async defer></script>
      </body>
    </html>

score 0 · Accepted Answer · answered Feb 15 '17 at 15:40

You are not loading the API correctly. You should load it as described in the documentation

from that documentation:

The following bootstrap request illustrates how to request the google.maps.geometry library of the Maps Javascript API:
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

You are currently loading the sub pieces of the API separately (e.g. https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/common.js), that will not be reliable.

Erratic results with modified example

1 Answers1