+
+
+
+
+
+
+
+
+
+
diff --git a/main.js b/main.js
new file mode 100644
index 00000000..4c46a2b9
--- /dev/null
+++ b/main.js
@@ -0,0 +1,41 @@
+// Initialize and add the map
+let map;
+
+async function initMap() {
+ // The location of Uluru
+ const position = { lat: -25.344, lng: 131.031 };
+ // 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,
+ });
+
+ // The marker, positioned at Uluru
+ const marker = new AdvancedMarkerElement({
+ map: map,
+ position: position,
+ title: "Uluru",
+ });
+}
+
+initMap();
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 00000000..e228a6b9
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,20 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+ #map {
+ height:80%;
+ width: 80%;
+ align-items: center;
+ margin-left: 150px;
+ }
+
+ /*
+ * Optional: Makes the sample page fill the window.
+ */
+ html,
+ body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ }
\ No newline at end of file
From b0780aeaa7eb8b0909f96ac7b2161b64dd8ca0a2 Mon Sep 17 00:00:00 2001
From: JunaTeresMartin <83876430+JunaTeresMartin@users.noreply.github.com>
Date: Sun, 29 Oct 2023 21:47:48 +0530
Subject: [PATCH 2/5] Update README.md
---
README.md | 48 ++++++++++++++++++++++++++----------------------
1 file changed, 26 insertions(+), 22 deletions(-)
diff --git a/README.md b/README.md
index 877fb545..8e33edf1 100644
--- a/README.md
+++ b/README.md
@@ -1,32 +1,36 @@
-# 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 - junateresmartin@gmail.com
### 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
+
+Create an HTML file (e.g., index.html) with the following content
+Step 3: Create JavaScript File
+
+Create a JavaScript file (e.g., main.js) with the JavaScript code that initializes the map, performs location searches, and displays map markers. The JavaScript code should include the modifications discussed earlier in this conversation.
+
+Step 4: Create CSS File (Optional)
+
+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.
From 200151cbe5721b69c797bc77dadca38540e87eb4 Mon Sep 17 00:00:00 2001
From: JunaTeresMartin <83876430+JunaTeresMartin@users.noreply.github.com>
Date: Sun, 29 Oct 2023 21:49:36 +0530
Subject: [PATCH 3/5] Update README.md
---
README.md | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md
index 8e33edf1..80aadb5a 100644
--- a/README.md
+++ b/README.md
@@ -22,12 +22,13 @@ Before you start, make sure you have valid API keys for the Google Maps JavaScri
Step 2: Create HTML File
-Create an HTML file (e.g., index.html) with the following content
+Created an HTML file (index.html)
+
Step 3: Create JavaScript File
-Create a JavaScript file (e.g., main.js) with the JavaScript code that initializes the map, performs location searches, and displays map markers. The JavaScript code should include the modifications discussed earlier in this conversation.
+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 (Optional)
+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
From 735e7631e3411646d4b87eb28dd643c65721660a Mon Sep 17 00:00:00 2001
From: JunaTeresMartin <83876430+JunaTeresMartin@users.noreply.github.com>
Date: Sun, 29 Oct 2023 21:52:53 +0530
Subject: [PATCH 4/5] Update main.js
---
main.js | 22 +++++++++++++++-------
1 file changed, 15 insertions(+), 7 deletions(-)
diff --git a/main.js b/main.js
index 4c46a2b9..e92e77b2 100644
--- a/main.js
+++ b/main.js
@@ -2,8 +2,13 @@
let map;
async function initMap() {
- // The location of Uluru
- const position = { lat: -25.344, lng: 131.031 };
+ // 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");
@@ -29,11 +34,14 @@ async function initMap() {
styles: darkModeStyle,
});
- // The marker, positioned at Uluru
- const marker = new AdvancedMarkerElement({
- map: map,
- position: position,
- title: "Uluru",
+
+ // Add markers for Indian Coffee Houses
+ indianCoffeeHouses.forEach(place => {
+ new AdvancedMarkerElement({
+ map: map,
+ position: place,
+ title: place.name,
+ });
});
}
From 3e74a2e4fe39cf7d4ab6aec6a7c04e31fa7fcb53 Mon Sep 17 00:00:00 2001
From: JunaTeresMartin <83876430+JunaTeresMartin@users.noreply.github.com>
Date: Sun, 29 Oct 2023 21:54:12 +0530
Subject: [PATCH 5/5] Update styles.css
---
styles.css | 13 +++----------
1 file changed, 3 insertions(+), 10 deletions(-)
diff --git a/styles.css b/styles.css
index e228a6b9..59c35af3 100644
--- a/styles.css
+++ b/styles.css
@@ -1,7 +1,4 @@
-/*
- * Always set the map height explicitly to define the size of the div element
- * that contains the map.
- */
+
#map {
height:80%;
width: 80%;
@@ -9,12 +6,8 @@
margin-left: 150px;
}
- /*
- * Optional: Makes the sample page fill the window.
- */
- html,
- body {
+ html, body {
height: 100%;
margin: 0;
padding: 0;
- }
\ No newline at end of file
+ }