-1

Hoping someone can help.

I'm currently building a website that stores some venues (locations) information for use within the application.

What i want to achieve is, an input in a modal window where a User supplies 2 things:

  1. Venue name (can be named whatever the user wants - this is easy).
  2. A Google Address Autocomplete box where a user starts typing the address and results automatically get populated - this is the part i need help with.
  3. The entire address needs to be a single input as I store this as a large string (I don't need it broken down into street, address, post/zip code, etc.)
  4. I also need, from the automatically created address, to get the longitude and latitude of the address populated and apply those to the hidden fields.

Ideally I'd like to force the user to submit the form by selecting an option from the Google Addresses rather than manually inputting something. But this isn't crazy essential, more of a nice-to-have.

Here is my form inputs:

<form method="POST" action="{{ route('manage.venue.create', $url_extension) }}">
    @csrf

    <div class="form-group">
        <label for="amount">Venue Name</label>
            <input id="name"
                   type="text"
                   class="form-control"
                   name="name"
                   autofocus
                   placeholder="Enter Venue Name">
    </div>

    <div class="form-group">
        <label for="amount">Address</label>
        <input id="address"
               type="text"
               class="form-control"
               name="address"
               autofocus
               placeholder="Enter Location Name">
        <input type="hidden" name="latitude" id="latitude" value="0" />
        <input type="hidden" name="longitude" id="longitude" value="0" />
    </div>

    <br>

    <button type="submit" class="btn btn-primary">Save</button>

</form>

I'm aware that all of the magic needs to happen in Javascript and I found a lot of useful resources online about creating these autocomplete boxes however none of them really cater to what I need. Also, all the examples I saw vary from different versions of the Google API and some are quite old. Also all of them tend to have a big Google Map with a drop down pin as well which I don't need.

I already have a GCP project created with an API key and all the necessary API's enabled.

I would highly appreciate any help on this, thank you.

Mous
  • 131
  • 8
  • 2
    Although you claim the opposite, it doesn't look like you have done any research before asking for the [most basic implementation of the Places Autocomplete widget](http://jsfiddle.net/upsidown/GVdK6/). The official documentation is also full of examples and useful information. – MrUpsidown Jul 07 '20 at 10:23
  • 1
    thanks for your response. I did see this and when implementing on my end, it just didn't work. I even added the script tags implementing the maps API. Also, how would I add the long/lat as part of the form request? this seems to just dump it onto the browser window – Mous Jul 07 '20 at 10:28
  • 2
    *It didn't work* is not a good problem description. The link I provided is just a simple demo. You need to clarify what you are trying to do and learn how to debug javascript and maybe the basics of DOM manipulation with JS. The code I provided doesn't *just dump it onto the browser window* - it modifies the inner HTML of a DOM element on the page. You can do the same with a form element or other HTML elements but this is really **way too broad** for a question here. – MrUpsidown Jul 07 '20 at 10:34
  • 1
    I guess i need to brush up on my javascript knowledge. I was hoping someone has already implemented something similar and could give some guidance. Thanks for your help anyway. – Mous Jul 07 '20 at 10:37
  • 3
    Obviously someone has done that already, yes. The code I provided gets the latitude and longitude of the place (`place.geometry.location.lat()` and `place.geometry.location.lng()`) and you have a form with 2 inputs (latitude and longitude) and an address field. See what you can get from the `getPlace()` method, then your question is about how to [Set the value of an input field](https://stackoverflow.com/questions/7609130/set-the-value-of-an-input-field). – MrUpsidown Jul 07 '20 at 10:43
  • 1
    Thats actually incredibly helpful, thank you. I managed to get the address, long and lat saved in fields. Currently working on the validation to make sure a user can only submit an option found by google. Thanks again for your help. – Mous Jul 07 '20 at 11:01

1 Answers1

1

Resolved: http://jsfiddle.net/upsidown/GVdK6/

function initialize() {

var ac = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')), {
  types: ['geocode']
});

ac.addListener('place_changed', function() {

var place = ac.getPlace();

if (!place.geometry) {
  // User entered the name of a Place that was not suggested and
  // pressed the Enter key, or the Place Details request failed.
  window.alert("No details available for input: '" + place.name + 
 "'");
  return;
}

var html = '<div>Latitude: ' + place.geometry.location.lat() + 
'</div>';
html += '<div>Longitude: ' + place.geometry.location.lng() + 
'</div>'; 

  document.getElementById('geometry').innerHTML = html;
  });
  }

initialize();

Thanks for your help.

Mous
  • 131
  • 8
  • 1
    Please don't add "thank you" as an answer. Instead, **[accept the answer](https://stackoverflow.com/help/accepted-answer)** that you found most helpful. - [From Review](/review/low-quality-posts/26611583) – vimuth Jul 07 '20 at 14:13
  • 2
    I tried but it says this: "You can accept your own answer in 2 days" – Mous Jul 07 '20 at 14:30
  • 2
    You don't accept your own answer, instead you prompt the one that helped you in a comment to post an answer. – Michael Chourdakis Jul 07 '20 at 14:32
  • 1
    Add a the code which helped you to solve the question as an answer and accept it after two days :) – vimuth Jul 07 '20 at 14:39