kevinhqi / googlemapapi-vue3-practice

GoogleMapAPI Vue3 Practice

Desktop View	Mobile View

Introduction：

This is a front-end project that took half a week to complete. It utilizes the Vue 3 framework with Vuetify as the UI support and interacts with the Google Maps API to implement various functionalities.
Two sets of layout designs were created for the desktop and mobile interfaces.

The implemented features include:

• Searching for a location by name.
  
• Obtaining the user's current location from the browser as a search option.
  
• Displaying images, address, and local time of the searched location, and marking it on the map.
  
• Recording search history in a list format and displaying it in a paginated manner.
  
• Allowing users to delete any selected historical locations and removing their records and markers from the map.
  

Here is a deployed page you can check:
To My Deployment (Notice: You will need a Google Map API key to access the page.)

Installation:

1. Make sure you have Node.js and npm installed.
   
2. Install yarn by typing command in terminal (consider run all commands as administrator） :
   npm install --global yarn
   
3. Cd into folder "GoogleMapAPI-Vue3".
   
4. Enter command:
   yarn install
   Then:
   yarn dev
   
5. A local host address should appear in terminal, now you can open it in your web broswer.
   

User Guide

1. When accessing the web page, it will require you to input Google Maps API key:
   
   Copy and paste your key into it and click submit.
   (Notice that there is no validation on the key, please make sure you put in the correct key.To renter the API key,
   just refresh the page and do the process again.)
   

2. After the web page launch, you can see a search bar on top left of the page:
   
   Input the place name you want to search and click on the magnifier icon(or press enter), the result should show on below:
   
   You can see name, address, local time and time zone, also a picture of the place.
   On the right side, a marker at the location will appear on map:
   
   

3. You can get your current location by clicking the geo marker icon on the left.
   
   Be sure to give the page access to your location:
   
   Now you can see your location display:
   
   

4. Everytime you search for a place, it will be added to a list on below, its ordered based on time without duplicates.
   Each page displays a maximum of 10 locations. You can navigate to the next page at the bottom, and the selected checkboxes will be retained when you switch pages.
   
   You can select any place by click on the checkbox on its left, then click delete to remove them from the list and map:
   
   

5. To access history list on mobile layout, you can click on history button at the bottom:
   
   You can check the list and manage it the same way as above: