hack2skill · JunaTeresMartin · Oct 29, 2023 · Oct 29, 2023 · Oct 29, 2023 · Oct 29, 2023
diff --git a/README.md b/README.md
@@ -1,32 +1,37 @@
-# Code-with-Google-Maps-2023 - Hack2skill
 
-Welcome to the official repository for the Code-with-Google-Maps-2023 organized by Hack2skill!
 
-## Getting Started
-
-To get started with the Code-with-Google-Maps-2023 repository, follow these steps:
-
-### Submission Instruction:
-  1. Fork this repository
-  2. Create a folder with your Team Name
-  3. Upload all the code and necessary files in the created folder
-  4. Upload a **README.md** file in your folder with the below mentioned informations.
-  5. Generate a Pull Request with your Team Name. (Example: submission-XYZ_team)
-
-### README.md must consist of the following information:
-
-#### Team Name -
-#### Problem Statement - 
-#### Team Leader Email -
+#### Team Name - La Carta
+#### Problem Statement - Addressing the need for safer, more enjoyable night-time experiences by enhancing navigation and safety for nightlife enthusiasts.
+#### Team Leader Email - [email protected]
 
 ### A Brief of the Prototype:
-  This section must include UML Diagrams and prototype description
+  The "AfterHours" mobile app prototype is about making your nightlife experience better and safer. It works with Google Maps and gives you personalized suggestions for parties and clubs based on what you like and what you've done before. It also tells you how crowded a place is in real-time so you can pick the best spot. If you're ever in trouble, it helps you call for help quickly. Plus, it helps you figure out how to get around at night with special bus routes and shows you well-lit paths. You won't have to hunt for a restroom or drinks because the app will help you find them easily. You can also share your thoughts and connect with others who like nightlife. Overall, it’s a perfect nightlife buddy, making sure everyone’s nights are fun, memorable, and safe.
+
 
 ### Tech Stack: 
-   List Down all technologies used to Build the prototype
+   HTML
+   CSS 
+   JavaScript
+   Google Map JavaScript API
+
 
 ### Step-by-Step Code Execution Instructions:
-  This Section must contain a set of instructions required to clone and run the prototype so that it can be tested and deeply analyzed
+  Step 1: Obtain API Keys
+
+Before you start, make sure you have valid API keys for the Google Maps JavaScript API and the Google Places API. You can obtain these keys from the Google Cloud Console.
+
+Step 2: Create HTML File
+
+Created an HTML file (index.html) 
+
+Step 3: Create JavaScript File
+
+Create a JavaScript file ( main.js) with the JavaScript code that initializes the map, performs location searches, and displays map markers.
+
+Step 4: Create CSS File 
+
+If you have specific styling requirements, create a CSS file (e.g., styles.css) and add your CSS rules to style the map and other elements as needed
+
 
 ### Future Scope:
-   Write about the scalability and futuristic aspects of the prototype developed
+   The "AfterHours" prototype not only offers a dynamic nightlife experience in the present but is also strategically poised for scalability and future innovation. With a flexible and adaptable architecture, it can effortlessly accommodate a growing user base and emerging technologies, ensuring that it remains a pioneering and indispensable nightlife companion for years to come.
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Add Map</title>
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
+
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <script type="module" src="main.js"></script>
+  </head>
+  <body>
+    <center><h2>AfterHours</h2></center>
+    <!--The div element for the map -->
+    <div id="map"></div>
+    <!-- Add a location input field -->
+    <input type="text" id="locationInput" placeholder="Enter a location" />
+    <button onclick="searchLocation()">Search</button>
+
+    <!-- prettier-ignore -->
+    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
+        ({key: "AIzaSyDy1a-eEAO2-F00bAHH6LlgonEwutrVkS4", v: "beta"});</script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,49 @@
+// Initialize and add the map
+let map;
+
+async function initMap() {
+  // Create an array of Indian Coffee House locations
+  const indianCoffeeHouses = [
+    { lat: 10.152691403374137, lng: 76.73782588446456, name: "Indian Coffee House 1" },
+    { lat: 10.18062367564776, lng: 76.4350655114152, name: "Indian Coffee House 2" },
+    { lat: 9.950490304914442, lng: 76.63755310505263, name: "Indian Coffee House 3" },
+    { lat: 10.032395545432703, lng: 76.36337757752591, name: "Indian Coffee House 4" },
+  ];
+  // Request needed libraries.
+  //@ts-ignore
+  const { Map } = await google.maps.importLibrary("maps");
+  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
+
+
+  // Define a map style for dark mode
+  const darkModeStyle = [
+    {
+      featureType: "all",
+      elementType: "labels.text.fill",
+      stylers: [{ color: "#ffffff" }],
+    },
+    // Add more style configurations as needed.
+  ];
+
+
+  // The map, centered at Uluru
+  map = new Map(document.getElementById("map"), {
+    zoom: 4,
+    center: position,
+    mapId: "DEMO_MAP_ID",
+    styles: darkModeStyle,
+  });
+
+
+  // Add markers for Indian Coffee Houses
+  indianCoffeeHouses.forEach(place => {
+    new AdvancedMarkerElement({
+      map: map,
+      position: place,
+      title: place.name,
+    });
+  });
+}
+
+initMap();
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,13 @@
+
+ #map {
+    height:80%;
+    width: 80%;
+    align-items: center;
+    margin-left: 150px;
+  }
+
+  html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }