<prompt> Tengeneza programu ya wavuti ya JavaScript au TypeScript inayotumia API ya Ramani za Google ili kuonyesha ramani iliyowekwa katikati ya eneo fulani, inaruhusu watumiaji kuweka alama kwenye ramani, na kuhifadhi viwianishi vya vialamisho kwenye hifadhidata ya PostgreSQL.  <response>: Ili kuunda programu ya wavuti inayotumia API ya Ramani za Google kuonyesha ramani, inaruhusu watumiaji kuweka alama, na kuhifadhi viwianishi vya alama kwenye hifadhidata ya PostgreSQL, fuata hatua hizi:1. Sanidi muundo wa mradi wakoUnda folda mpya ya mradi wako na usanidi muundo ufuatao:mradi-- index.html-- script.js-- mtindo.css2. Unda faili ya HTML index.htmlOngeza nambari ifuatayo kwa index.html:html Programu ya Alama ya Ramani za Google kichwa mwili htmlBadilisha YOUR_API_KEY kwa ufunguo wako halisi wa API ya Ramani za Google.3. Ongeza mitindo style.csscssmwili, html urefu: 100; ukingo: 0;ramani urefu: 100;4. Andika msimbo wa JavaScript script.js javascriptruhusu ramani;kazi initMap const defaultCenter lat: -34.397, lng: 150.644; ramani new google.maps.Mapdocument.getElementByIdmap, kituo: defaultCenter, kukuza: 8, ; Ongeza msikilizaji wa tukio la kubofya kwenye ramani map.addListenerclick, functiontukio addMarkerevent.latLng; saveMarkerToDatabaseevent.latLng.toJSON; ;kazi addMarkermahali const marker new google.maps.Marker nafasi: eneo, ramani: ramani ;kazi saveMarkerToDatabasecoordinates Hifadhi viwianishi kwenye hifadhidata ya PostgreSQL kwa kutumia msimbo wako wa upande wa seva. console.logHifadhi viwianishi hivi kwenye hifadhidata:, viwianishi;5. Sanidi seva ya nyuma na uiunganishe kwenye hifadhidata ya PostgreSQLUnaweza kutumia mfumo au lugha yoyote ya nyuma kwa hatua hii, kama vile Node.js with Express, Python with Flask, Ruby on Rails, n.k. Lengo kuu ni kuunda ncha ya API ambayo inapokea viwianishi vya alama kutoka mbele- mwisho na kuzihifadhi kwenye hifadhidata ya PostgreSQL.Kwa mfano, ikiwa unatumia Node.js iliyo na Express na pg maktaba kuunganisha kwa PostgreSQL, unaweza kuandika kitu kama: javascriptconst express needexpress;const bodyParser needbody-parser;const Dimbwi needpg;const app express;app.usebodyParser.json;const pool Dimbwi jipya connectionString: async req, res jaribu const lat, lng req.body; await pool.queryWEKA NDANI ya vialamisho lat, lng THAMANI 1, 2, lat, lng; res.status201.jsonujumbe:Alama imehifadhiwa ; kukamata kukosea console.errorkosa; res.status500.json kosa: Imeshindwa kuhifadhi alama ; ;app.sikiliza3000, console.logSeva inayoendesha kwenye bandari 3000;;6. Sasisha chaguo za kukokotoa saveMarkerToDatabase katika script.js ili kutuma ombi la POST kwa mwisho wa API yako: javascriptkazi ya async saveMarkerToDatabasecoordinates jaribu const response subiri kuletaapialama, njia: POST, vichwa: Aina ya Maudhui: applicationjson , mwili: JSON.stringifycoordinates, ; ikiwa !jibu.ok tupa Hitilafu mpyaImeshindwa kuhifadhi alama; console.logAlama imehifadhiwa:, kuratibu; kukamata kukosea console.errorkosa; Sasa, unapoendesha programu yako na kubofya kwenye ramani, itaongeza alama katika eneo hilo na kutuma viwianishi vyake kwa seva yako ya nyuma ili kuhifadhiwa katika hifadhidata ya PostgreSQL. 