To design a web application that integrates with Google Maps API and displays points of interest around a given location, you can follow these steps:

1. Set up the project structure

Create a new folder for your project and initialize it as an npm package by running `npm init`. Install the necessary dependencies using `npm install`:

```bash
mkdir google-maps-app
cd google-maps-app
npm init -y
npm install express ejs body-parser mongodb firebase googlemaps --save
```

2. Create server.js file

Create a `server.js` file in the root directory of your project to set up the Express server.

```javascript
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');

// Routes
app.get('/', (req, res) => {
  res.render('index');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
```

3. Create views/index.ejs file

Create a `views` folder in the root directory of your project and add an `index.ejs` file inside it. This will be the main HTML template for your application.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Maps App</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
  <script src="/public/app.js"></script>
</head>
<body>
  <div id="map"></div>
  <input type="text" id="search-box" placeholder="Search for places...">
  <div id="place-details"></div>
</body>
</html>
```

Replace `YOUR_API_KEY` with your actual Google Maps API key.

4. Create public/app.js file

Create a `public` folder in the root directory of your project and add an `app.js` file inside it. This will contain the JavaScript code to interact with the Google Maps API.

```javascript
let map;
let service;
let infowindow;

function initMap() {
  const center = { lat: -33.867, lng: 151.206 };

  map = new google.maps.Map(document.getElementById('map'), {
    center,
    zoom: 15,
  });

  const request = {
    location: center,
    radius: '500',
    type: ['restaurant'],
  };

  infowindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);

  // Add search box
  const input = document.getElementById('search-box');
  const searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', () => {
    searchBox.setBounds(map.getBounds());
  });

  let markers = [];
  searchBox.addListener('places_changed', () => {
    const places = searchBox.getPlaces();

    if (places.length === 0) {
      return;
    }

    // Clear out the old markers.
    markers.forEach((marker) => {
      marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name, and location.
    const bounds = new google.maps.LatLngBounds();
    places.forEach((place) => {
      if (!place.geometry || !place.geometry.location) {
        console.log('Returned place contains no geometry');
        return;
      }

      // Create a marker for each place.
      markers.push(
        new google.maps.Marker({
          map,
          title: place.name,
          position: place.geometry.location,
        })
      );

      if (place.geometry.viewport) {
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });
}

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (let i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  const marker = new google.maps.Marker({
    map,
    position: place.geometry.location,
  });

  google.maps.event.addListener(marker, 'click', () => {
    infowindow.setContent(`<div><strong>${place.name}</strong><br>${place.vicinity}</div>`);
    infowindow.open(map, marker);
  });
}
```

5. Set up the database

To store user preferences and search history, you can use MongoDB or Firebase. Here's an example of how to set up a connection with MongoDB:

```javascript
const MongoClient = require('mongodb').MongoClient;

// Replace the following with your actual MongoDB URI
const uri = 'mongodb+srv://username:password@cluster.mongodb.net/test?retryWrites=true&w=majority';

const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });

client.connect((err) => {
  if (err) throw err;
  console.log('Connected to MongoDB');

  // Perform database operations here
});
```

6. Add CSS styles

You can add custom CSS styles to your application by creating a `public/styles.css` file and linking it in your `index.ejs` file.

7. Run the application

Start your server by running `node server.js`. Open a web browser and navigate to `http://localhost:3000`. You should see the Google Maps interface with points of interest around the specified location.

You can now continue building out the application, adding features such as user authentication, storing search history, and displaying place details.
Google 지도 API와 통합되어 특정 위치 주변의 관심 지점을 표시하는 웹 애플리케이션을 디자인하려면 다음 단계를 따르세요.

1. 프로젝트 구조 설정

프로젝트를 위한 새 폴더를 생성하고 `npm init`을 실행하여 npm 패키지로 초기화합니다. `npm install`을 사용하여 필요한 의존성을 설치합니다:

```bash
mkdir google-maps-app
cd google-maps-app
npm init -y
npm install express ejs body-parser mongodb firebase googlemaps --save
```

2. server.js 파일 생성

프로젝트의 루트 디렉터리에 `server.js` 파일을 생성하여 Express 서버를 설정합니다.

```javascript
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');

// Routes
app.get('/', (req, res) => {
  res.render('index');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
```

3. 보기/index.ejs 파일 만들기

프로젝트의 루트 디렉터리에 `views` 폴더를 만들고 그 안에 `index.ejs` 파일을 추가합니다. 이 파일이 애플리케이션의 기본 HTML 템플릿이 됩니다.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Maps App</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
  <script src="/public/app.js"></script>
</head>
<body>
  <div id="map"></div>
  <input type="text" id="search-box" placeholder="Search for places...">
  <div id="place-details"></div>
</body>
</html>
```

`YOUR_API_KEY`를 실제 구글 지도 API 키로 바꿉니다.

4. public/app.js 파일 만들기

프로젝트의 루트 디렉터리에 `public` 폴더를 만들고 그 안에 `app.js` 파일을 추가합니다. 이 파일에는 Google 지도 API와 상호 작용하기 위한 자바스크립트 코드가 포함됩니다.

```javascript
let map;
let service;
let infowindow;

function initMap() {
  const center = { lat: -33.867, lng: 151.206 };

  map = new google.maps.Map(document.getElementById('map'), {
    center,
    zoom: 15,
  });

  const request = {
    location: center,
    radius: '500',
    type: ['restaurant'],
  };

  infowindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);

  // Add search box
  const input = document.getElementById('search-box');
  const searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', () => {
    searchBox.setBounds(map.getBounds());
  });

  let markers = [];
  searchBox.addListener('places_changed', () => {
    const places = searchBox.getPlaces();

    if (places.length === 0) {
      return;
    }

    // Clear out the old markers.
    markers.forEach((marker) => {
      marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name, and location.
    const bounds = new google.maps.LatLngBounds();
    places.forEach((place) => {
      if (!place.geometry || !place.geometry.location) {
        console.log('Returned place contains no geometry');
        return;
      }

      // Create a marker for each place.
      markers.push(
        new google.maps.Marker({
          map,
          title: place.name,
          position: place.geometry.location,
        })
      );

      if (place.geometry.viewport) {
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });
}

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (let i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  const marker = new google.maps.Marker({
    map,
    position: place.geometry.location,
  });

  google.maps.event.addListener(marker, 'click', () => {
    infowindow.setContent(`<div><strong>${place.name}</strong><br>${place.vicinity}</div>`);
    infowindow.open(map, marker);
  });
}
```

5. 데이터베이스 설정

사용자 기본 설정 및 검색 기록을 저장하기 위해 MongoDB 또는 Firebase를 사용할 수 있습니다. 다음은 MongoDB와의 연결을 설정하는 방법의 예입니다:

```javascript
const MongoClient = require('mongodb').MongoClient;

// Replace the following with your actual MongoDB URI
const uri = 'mongodb+srv://username:password@cluster.mongodb.net/test?retryWrites=true&w=majority';

const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });

client.connect((err) => {
  if (err) throw err;
  console.log('Connected to MongoDB');

  // Perform database operations here
});
```

6. CSS 스타일 추가

`public/styles.css` 파일을 생성하고 `index.ejs` 파일에 링크하여 애플리케이션에 사용자 정의 CSS 스타일을 추가할 수 있습니다.

7. 애플리케이션 실행

`node server.js`를 실행하여 서버를 시작합니다. 웹 브라우저를 열고 `http://localhost:3000`으로 이동합니다. 지정한 위치 주변의 관심 지점이 표시된 Google 지도 인터페이스가 표시됩니다.

이제 사용자 인증, 검색 기록 저장, 장소 세부 정보 표시와 같은 기능을 추가하여 애플리케이션을 계속 구축할 수 있습니다.