autocomplete does not work on the server

[T3RON]

I used google maps api for autocomplete of places.

Everythings works in localhost, but when i publish and upload it on server, it doesn't work...Why it happen? the dropdown of places does not show.

[colerua]

I'm finding that the autocomplete isn't working at all for me including localhost. can you give me the code you're using to get even that far?

[T3RON]

use this : <script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>

and :

` $('#us1').locationpicker({

  inputBinding: {
    latitudeInput: $('#lat'), 
    longitudeInput: $('#lon'),
    radiusInput: $('#cover_area'),
    locationNameInput: $('#uaddress')
  },
    enableAutocomplete: true
});

`

[colerua]

I didn't have enableAutocomplete: true which seems to have at least changed the input for city but for some reason it is still not auto suggesting locations as you enter in the details. Do I need a google api key?

`

<script src="_scripts/locationpicker.jquery.js"></script>

                <div class='col-md-12'>
                    Location:
                    <input type="text" id="us2-address" style="width: 200px"/>
                    Radius: <input type="text" id="us2-radius"/>
                    <div id="us2" style="width: auto; height: 400px;"></div>
                    Lat.: <input type="text" id="us2-lat"/>
                    Long.: <input type="text" id="us2-lon"/>
                </div>

`

    $('#select-location-modal').on('shown.bs.modal', function (e) {
        $('#us2').locationpicker({
            location: {latitude: <?php echo $currentLat; ?>, longitude: <?php echo $currentLng; ?>},
            radius: 300,
            inputBinding: {
                latitudeInput: $('#us2-lat'),
                longitudeInput: $('#us2-lon'),
                radiusInput: $('#us2-radius'),
                locationNameInput: $('#us2-address')
            },
                enableAutocomplete: true
        });
    });

[T3RON]

You don't need a Google api but you have to attach locationpicker.jquery.js

[colerua]

I am including it though I'm getting the following errors in the console:

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

util.js:208 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

js?sensor=false&libraries=places:34 This service requires an API key. For more information on authentication and Google Maps Javascript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key

[T3RON]

I also have this problem and I don't know where is the problem but is work on the localhost but not on the server

[colerua]

What packages / systems you have running on your local server that isn't on the web server?

[Sumragen]

@T3RON and @colerua try to create API key in google developers console.

1. Create project.
2. Go to credentials.
3. Create credentials and select API key. (use it API key)
4. Open your new credential and set HTTP referrers (web sites), then add link of your site. (it important)
5. Enable Google Maps JavaScript API in library.

Be sure that you include google maps library to your project

<script type="text/javascript" src='http://maps.google.com/maps/api/js?key=YOUR_API_KEY&sensor=false&libraries=places'></script>

And of course property enableAutocomplete must be enabled

$('#mapId').locationpicker({
   inputBinding: {
      locationNameInput: $('#nameInputId')
   },
   enableAutocomplete: true
});

P.S. It helped me.

[T3RON]

@Sumragen Tanks it's work

[colerua]

I must be missing something as this didn't work for me. Instead the map isn't appearing at all now.

[colerua]

ok, fixed that. was the http rule but the autocomplete is still not working :(

[suleigolden]

 1.  Go to google map credentials.  https://console.developers.google.com/apis/credentials
 2. Create credentials and select API key. (use it API key)
 3. Click on HTTP referrers (web sites).
 4. add you web site link.
 5. Enable Google Maps JavaScript API in library.

                 <script>
                function init() {
                    var input = document.getElementById('locationTextField');
                    var autocomplete = new google.maps.places.Autocomplete(input);
                }

                google.maps.event.addDomListener(window, 'load', init);
            </script>