Массив из JS в PHP через AJAX работает только после второго нажатия кнопки

Question

У меня проблема с передачей многомерного массива из JS в PHP.Я использую Ajax для этого, но я получаю значения только после второго нажатия на кнопку.Я хотел бы, чтобы он работал при первом нажатии.

Это для проекта, который использует Google MAPS / PLACES / Geolocation API.Я использую PHP 7.1 на XAMMP.Я попытался установить для ajax-запроса async: «false», но он не работал.

Вот код JS.

$("button").click(function() {
        $.ajax({
            type: "POST",
            url: "Google_DB_Insert.php",
            data: {Google_Lieferant: (Google_Lieferant)},
            success: function (data) {
                alert(data);
                console.log(data);
            }
        });
    });
    });

Вот код PHP:

$data = [];

if(isset($_POST['Google_Lieferant'])) {
$data = $_POST['Google_Lieferant'];
}
var_dump($data);

При первом нажатии кнопки я получаю этот вывод в моей консоли Chrome:

array(0) {
}

При втором нажатии кнопки я получаю этот вывод в моей консоли Chrome:

array(10) {
  [0]=>
  array(8) {
    ["reference_id"]=>
    string(27) "ChIJb5Iv7pF9uEcRZWdjpp0E0_U"
    ["lat"]=>
    string(8) "51.84731"
    ["lng"]=>
    string(17) "6.613619999999969"
    ["title"]=>
    string(15) "Title"
    ["address"]=>
    string(43) "Adress"
    ["phone"]=>
    string(15) "Phonenumber"
    ["website"]=>
    string(29) "Website"
    ["gewerk"]=>
    string(26) "Name"
  }

и остальная часть массива.

Объект / массив Google_Lieferant выглядит так в консоли Chrome, прежде чем я отправлю его через ajax:

Array(10)
0: {reference_id: "ChIJb5Iv7pF9uEcRZWdjpp0E0_U", lat: 51.84731, lng:...
1:...

Я новичок в Webdev и будурад получить толчок в правильном направлении.Спасибо!

Редактировать: вот HTML-разметка

    <div class="margin">
    <div class="row">
        <div class="col">
            <h2>Suchkriterien</h2>
        </div>
        <img src="assets/images/Gruppe.jpg" height="70" width="408" alt="Logo" align="right">

  </div>
    <form target="Rueckgabe" method="post" action="Lieferantenkarte.php">
        <div class="row">
            <div class="col-sm">
                <div class="form-group">
                    <label for="Handwerkwaehlen">Handwerk</label>
                    <div class="ui-widget">
                        <input id="gewerke" class="form-control txt-auto"/>
                    </div>
                </div>
            </div>
            <div class="col-sm">
                <div class="form-group">
                    <label for="Standortwaehlen">Standort</label>
                    <input type="text" class="form-control" id="Standortwaehlen" name="Standort" placeholder="Standort eingeben" onFocus="geolocate()">
                </div>
            </div>
            <div class="col-sm">

            </div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div class="form-group">
                    <label for="Google Suche">Google suche aktivieren?</label>
                    <input type="checkbox" class="form-control" id="checkbox" name="checkbox" >

                </div>
            </div>
            <div class="col-sm">
                <label class="form-check-label" for="Radius">Suchradius</label>
                <input type="range" id="Radius" name="radius" class="form-control" min="2" max="100" value="5">
                <span id="Radius_Wert"></span><a> km Radius</a>
            </div>
            <div class="col-sm">

            </div>
        </div>
        <div class="row">
            <div class="col-sm">
                <button  type="submit" name="submit" id="button" class="btn btn-primary">Suchen</button>
            </div>
        </div>
    </form>
    <div class="row">
        <div class="col-md">
            <iframe  width="1000px" height="500px" name="Rueckgabe">

            </iframe>
        </div>
        <div class="col-md">
            <div id="map"></div>
            <div id="legend"><h3>Legend</h3></div>

        </div>

    </div>