詳細を表示する

詳細を示す

function markerInfo(marker, content) {
  google.maps.event.addListener(marker, 'click', function (event) {
    new google.maps.InfoWindow({
      content: content,
    }).open(marker.getMap(), marker);
  });
}

contentを配列に格納する

var content = [];
for (var i = 0; i < data.length; ++i) {
  content[i] = '<div class="info" ><h1>' + data[i].name + '</h1><p>' + data[i].address + '</p></div>';
}

マーカーをクリックして、詳細を表示しました。 けどタイトルが大きすぎるしバランスが悪いです。 styleを設定する

<style>
  .info h1 {
    padding-top: 8px;
    font-size: 18px;
  }

  .info p {
    margin: 0;
    font-size: 14px;
  }
</style>