Как отобразить часы в информационном окне Google Maps

Question

Я пытаюсь отобразить часы в моем информационном окне. Часы работают нормально, когда я вхожу в веб-консоль, но всякий раз, когда я пытаюсь отобразить их в моем информационном окне, они не будут работать и будут отображать «undefined».

Я пытался добавить функцию GetClock() который возвращает время следующим образом:

        var MiamiContent =
            '<h3> Miami </h3><br ><h5>'+ setInterval(GetClock, 1000) +' </h5>' 

        var MiamiInfoCard = new google.maps.InfoWindow
            ({
                content: MiamiContent
            });

Это функция, которая возвращает время. Это работает нормально.

    tday = new Array("Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat");
    tmonth = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec");
    function GetClock() {
        var d = new Date();
        var nday = d.getDay(), nmonth = d.getMonth(), ndate = d.getDate(), nyear = d.getYear(), nhour = d.getHours(), nmin = d.getMinutes(), nsec = d.getSeconds(), ap;
        if (nhour == 0) { ap = " AM"; nhour = 12; }
        else if (nhour < 12) { ap = " AM"; }
        else if (nhour == 12) { ap = " PM"; }
        else if (nhour > 12) { ap = " PM"; nhour -= 12; }

        if (nyear < 1000) nyear += 1900;
        if (nmin <= 9) nmin = "0" + nmin;
        if (nsec <= 9) nsec = "0" + nsec;

        console.log(tday[nday] + ", " + tmonth[nmonth] + " " + ndate + ", " + nyear + " " + nhour + ":" + nmin + ":" + nsec + ap + "")
    }

    window.onload = function () {
        GetClock();
        setInterval(GetClock, 1000);
    }

Я предполагаю, что что-то не так с тем, как я вызываю функцию в переменной MiamiContent, так как функция работает в моей консоли. Или потому, что я регистрирую это в своей функции, а информационное окно не знает, как «регистрировать» вещи. Помощь очень ценится

Answer 1

Если вы хотите, чтобы функция GetClock отображалась в DOM InfoWindow, вам нужно написать код для этого. Например:

var MiamiContent =
  '<h3> Miami </h3><br ><h5><span id="clock"></span></h5>'

var MiamiInfoCard = new google.maps.InfoWindow({
  content: MiamiContent
});

Затем в GetClock:

  tday = new Array("Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat");
  tmonth = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec");

  function GetClock() {
    var d = new Date();
    var nday = d.getDay(),
      nmonth = d.getMonth(),
      ndate = d.getDate(),
      nyear = d.getYear(),
      nhour = d.getHours(),
      nmin = d.getMinutes(),
      nsec = d.getSeconds(),
      ap;
    if (nhour == 0) {
      ap = " AM";
      nhour = 12;
    } else if (nhour < 12) {
      ap = " AM";
    } else if (nhour == 12) {
      ap = " PM";
    } else if (nhour > 12) {
      ap = " PM";
      nhour -= 12;
    }

    if (nyear < 1000) nyear += 1900;
    if (nmin <= 9) nmin = "0" + nmin;
    if (nsec <= 9) nsec = "0" + nsec;

    console.log(tday[nday] + ", " + tmonth[nmonth] + " " + ndate + ", " + nyear + " " + nhour + ":" + nmin + ":" + nsec + ap + "")
    var clockSpan = document.getElementById('clock');
    if (!!clockSpan) {
      clockSpan.textContent = tday[nday] + ", " + tmonth[nmonth] + " " + ndate + ", " + nyear + " " + nhour + ":" + nmin + ":" + nsec + ap + "";
    }
  }

и вы можете запустить интервальный таймер для функции GetClock в функции initMap.

подтверждение концепции скрипта

фрагмент кода:

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var MiamiContent =
    '<h3> Miami </h3><br ><h5><span id="clock"></span></h5>'

  var MiamiInfoCard = new google.maps.InfoWindow({
    content: MiamiContent
  });


  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    MiamiInfoCard.open(map, marker);
  });
  setInterval(GetClock, 1000);
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<script>
  tday = new Array("Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat");
  tmonth = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec");

  function GetClock() {
    var d = new Date();
    var nday = d.getDay(),
      nmonth = d.getMonth(),
      ndate = d.getDate(),
      nyear = d.getYear(),
      nhour = d.getHours(),
      nmin = d.getMinutes(),
      nsec = d.getSeconds(),
      ap;
    if (nhour == 0) {
      ap = " AM";
      nhour = 12;
    } else if (nhour < 12) {
      ap = " AM";
    } else if (nhour == 12) {
      ap = " PM";
    } else if (nhour > 12) {
      ap = " PM";
      nhour -= 12;
    }

    if (nyear < 1000) nyear += 1900;
    if (nmin <= 9) nmin = "0" + nmin;
    if (nsec <= 9) nsec = "0" + nsec;

    console.log(tday[nday] + ", " + tmonth[nmonth] + " " + ndate + ", " + nyear + " " + nhour + ":" + nmin + ":" + nsec + ap + "")
    var clockSpan = document.getElementById('clock');
    if (!!clockSpan) {
      clockSpan.textContent = tday[nday] + ", " + tmonth[nmonth] + " " + ndate + ", " + nyear + " " + nhour + ":" + nmin + ":" + nsec + ap + "";
    }
  }

</script>