### Instruction:
Develop a JavaScript or TypeScript web application that uses Google Maps API to display a map centered at a given location, allows users to place markers on the map, and saves the marker coordinates to a PostgreSQL database.


### Response:

To create a web application that uses the Google Maps API to display a map, allows users to place markers, and saves the marker coordinates to a PostgreSQL database, follow these steps:

1. Set up your project structure
Create a new folder for your project and set up the following structure:
```
project/
|-- index.html
|-- script.js
|-- style.css
```

2. Create an HTML file (index.html)
Add the following code to `index.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 Marker App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  <script src="script.js"></script>
</body>
</html>
```

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

3. Add styles (style.css)

```css
body, html {
  height: 100%;
  margin: 0;
}

#map {
  height: 100%;
}
```

4. Write JavaScript code (script.js)

```javascript
let map;

function initMap() {
  const defaultCenter = { lat: -34.397, lng: 150.644 };
  map = new google.maps.Map(document.getElementById("map"), {
    center: defaultCenter,
    zoom: 8,
  });

  // Add click event listener to the map
  map.addListener('click', function(event) {
    addMarker(event.latLng);
    saveMarkerToDatabase(event.latLng.toJSON());
  });
}

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

function saveMarkerToDatabase(coordinates) {
  // Save the coordinates to a PostgreSQL database using your server-side code.
  console.log('Save these coordinates to the database:', coordinates);
}
```

5. Set up a back-end server and connect it to a PostgreSQL database

You can use any back-end framework or language for this step, such as Node.js with Express, Python with Flask, Ruby on Rails, etc. The main goal is to create an API endpoint that receives the marker coordinates from the front-end and saves them to a PostgreSQL database.

For example, if you are using Node.js with Express and `pg` library to connect to PostgreSQL, you could write something like:

```javascript
const express = require('express');
const bodyParser = require('body-parser');
const { Pool } = require('pg');

const app = express();
app.use(bodyParser.json());

const pool = new Pool({
  connectionString: 'postgres://username:password@localhost/dbname'
});

app.post('/api/markers', async (req, res) => {
  try {
    const { lat, lng } = req.body;
    await pool.query('INSERT INTO markers (lat, lng) VALUES ($1, $2)', [lat, lng]);
    res.status(201).json({ message: 'Marker saved' });
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: 'Failed to save marker' });
  }
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});
```

6. Update the `saveMarkerToDatabase` function in `script.js` to send a POST request to your API endpoint:

```javascript
async function saveMarkerToDatabase(coordinates) {
  try {
    const response = await fetch('/api/markers', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(coordinates),
    });

    if (!response.ok) {
      throw new Error('Failed to save marker');
    }

    console.log('Marker saved:', coordinates);
  } catch (err) {
    console.error(err);
  }
}
```

Now, when you run your application and click on the map, it will add a marker at that location and send its coordinates to your back-end server to be saved in the PostgreSQL database.