function MainComponent() { React.useEffect(()=>{ const initializeMap = ()=>{ const mapOptions = { zoom: 8, center: { lat: 35.6846, lng: 139.7566 } }; const map = new google.maps.Map(document.getElementById("map"), mapOptions); }; if (window.google) { initializeMap(); } else { window.initializeMap = initializeMap; const script = document.createElement("script"); script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initializeMap`; script.async = true; script.defer = true; document.head.appendChild(script); } }, []); return /*#__PURE__*/ React.createElement("div", { className: "h-screen flex flex-col", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "font-serif", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "ラーメン会"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit text-black", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow relative", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "map", className: "w-full h-full", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[20%] left-[30%] bg-orange-500 rounded-full p-2", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-white", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[37%] left-[40%] bg-orange-500 rounded-full p-2", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-white", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[45%] left-[60%] bg-orange-500 rounded-full p-2", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-white", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "absolute bottom-8 right-8 bg-white rounded-full p-4 shadow-md", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-black", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around items-center bg-white shadow-md p-2", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map text-black", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-serif text-sm", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "my map")), /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marked-alt text-black", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-serif text-sm", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "group map")), /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-black", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-serif text-sm", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "profile")))); }