Не работает вывод в javascript. Локализация ошибки

В коде получения названия города и записи его в куки, добавил отладочный вывод в 2 местах (для локализации ошибки на Не отображается название города ) (эти операторы не отработали)

alert(1)

и

        alert(city.long_name);
        alert(1);
        setCookie("city", city.long_name, "10");

        alert(city.long_name + ", " + region.long_name + ", " + country.short_name);

Привожу весь код ниже

$(document).ready(function () {
   var geocoder = new google.maps.Geocoder();
    alert(1);
    geocoder.geocode({address: lat + ',' + lng}, function (results, status) {
        if (status !== google.maps.GeocoderStatus.OK || !results[0]) {
            return;
        }
        var result = results[0];

        var city, region, country;

        for (var i = 0; i < result.address_components.length; i++) {
            if (result.address_components[i].types[0] === "locality") {
                city = result.address_components[i];
            }
            if (result.address_components[i].types[0] === "administrative_area_level_1") {
                region = result.address_components[i];
            }
            if (result.address_components[i].types[0] === "country") {
                country = result.address_components[i];
            }


        }

                    let div = document.createElement("div");
            let text = document.createElement("p");
            text.innerHTML = '${city}, ${country}';  

            document.body.append(div);
            div.append(text);
            print_r(city);
            echo 'q';
            alert(city.long_name);
            alert(1);
            setCookie("city", city.long_name, "10");

            alert(city.long_name + ", " + region.long_name + ", " + country.short_name);

    });

  // createCookie("city", city.long_name, "10");
});

function setCookie(name, value, days) {
  var expires;
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toGMTString();
  }
  else {
    expires = "";
  }
  document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
}

Но у меня не вывелась 1, city, q, region.long_name, country.short_name. Этот код я подключил в main.php

<script type="text/javascript" src="js/geoloc.js"></script>
<script type="text/javascript" src="js/geocode1.js"></script>

P. S. Расположил первый alert(1), который шел после

var geocoder = new google.maps.Geocoder();

перед

$(document).ready(function () {

и на экране вывелось введите сюда описание изображения

Почему то не работает код внутри

$(document).ready(function () {

P.S.1 Изменил код на

//alert(1);

window.onload=function () {

var geocoder = new google.maps.Geocoder();
alert(1);

Ответы (3 шт):

Автор решения: Igor
text.innerHTML = `${city}, ${country}`;
→ Ссылка
Автор решения: letUser

Вы немного неверно вставили предложенный мной ранее код. Обратите внимание на кавычки в строке text.innerHTML. Они должны быть ` а не '

→ Ссылка
Автор решения: Ярмоленко Володимир

ssl установлен? Для работы большинства Гугл api, необходим сертификат. Так же, что с API ключём, ошибок не бьёт при инициализации? Желательно прописать fallback на вызов Геокодера. Или в проверках, или с помощью конструкции try... catch. Старайтесь меньше использовать алерт, он плохо подходит для вывода объектов js, лучше подойдёт консоль. Для начала проверьте что приходит в колбэк. Так вы сразу увидите что вам пришло, и пришло ли вообще.

....
geocoder.geocode({address: lat + ',' + lng}, function (results, status) {

    console.log(results, status) //<-------

        if (status !== google.maps.GeocoderStatus.OK || !results[0]) {
            return;
        }
....
→ Ссылка