places detail API returns inconsistent icon

by wintlu

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Google Maps</title>
    <script src="index.js"></script>
    <script async src="https://maps.googleapis.com/maps/api/js"></script>
  </head>

  <body>
    <div id="map" style="height: 00px"></div>
    <div>Click Google POI to see the icon !!</div>
    <br />
    <div id="logs" />
  </body>

</html>

JavaScript

const initMap = function() {
  const logs = document.querySelector('#logs')
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.7586599, lng: -122.4752298 },
    zoom: 13
  });


  map.addListener("click", (e) => {
    e.stop();

    if ('placeId' in e) {
/*       fetch(`https://maps.googleapis.com/maps/api/place/details/json?place_id=${e.placeId}`) */

/*       const message = ('placeId' in e) ? ' POI is clicked after a delay' : ' blank map clicked immediately';
      const newLogs = logs.innerHTML + '<div>' + message + '</div>';
      logs.innerHTML = newLogs; */
    }

  });

};
setTimeout(() => {
  initMap()
}, 2000);