https://github.com/sharjeelyunus/google-maps-store-locator

Google Maps Store Locator App build with JavaScript🔥. It helps to locate stores on the map🌎.
https://github.com/sharjeelyunus/google-maps-store-locator

google-maps google-maps-api hacktoberfest javascript js-challenges maps store-locator

Last synced: 11 months ago
JSON representation

Google Maps Store Locator App build with JavaScript🔥. It helps to locate stores on the map🌎.

• Host: GitHub
• URL: https://github.com/sharjeelyunus/google-maps-store-locator
• Owner: sharjeelyunus
• Created: 2020-04-08T12:40:09.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-04-26T13:36:20.000Z (about 6 years ago)
• Last Synced: 2025-04-02T23:51:13.668Z (about 1 year ago)
• Topics: google-maps, google-maps-api, hacktoberfest, javascript, js-challenges, maps, store-locator
• Language: JavaScript
• Homepage:
• Size: 409 KB
• Stars: 26
• Watchers: 1
• Forks: 27
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Google Maps Store Locator🌎

Google Maps Store Locator App JavaScript Project.

- Locate Stores on Map.

## How it works?

When you click on markers or the list menu a popup window opens showing some details of that store. Also you can search the the store by its Zip Code.

![Vlc-Record-2020-04-26-18H06m39s](https://user-images.githubusercontent.com/61178058/80308677-b0b4f380-87e9-11ea-96bc-529de2bec99e.gif)

## What you can do?

You can use it as your store locator or anything like farms or food points in your city.

### How?

- Fork this Repository

- Update Location Coordinates

- Update Data (Name, phone number)

That's it, Now it's your Locator.

## Plan Of Action ✈

- ✔ Create Wireframe

- ✔ Setup base HTML Structure

- ✔ Import Google Map intpo the window

- ✔ Add the text store locator

- ✔ Add input box

- ✔ Add Store List Container

- ✔ Add Individual Store Container

- ✔ Style the individual store item in the Stores list

- ✔ Show all the stores in the stores list based on real world data

- ✔ Show the marker based on real world store data

- ✔ Complete styling for the marker info window

- ✔ Open the info window marker on store selection in stores list

- ✔ Allow a user to search for the stores in a zip code

- ✔ Add a beautiful transition on the hover of the individual store

If the Map is not showing (The API key might have been disabled)