Google-API-map

This is a web-based application that allows users to search for properties, draw boundaries on a map, and view details about specific locations. Built using the Google Maps API, this application is designed to be responsive and user-friendly.

Features

• Search for Properties: Users can search for locations using a search box, with suggestions powered by Google Places.
• Interactive Map with Drawing Tools: Users can draw markers, circles, polygons, polylines, and rectangles to mark areas of interest on the map.
• Property Information: Displays information about properties within the marked areas.
• Responsive Design: Ensures the application works well on different devices.

Getting Started

Prerequisites

• A web browser (e.g., Chrome, Firefox, Safari)
• An internet connection

Installation

1. Clone the repository:

   git clone (https://guang84.github.io/Google-API-map/)
   cd hope-map

2. Open the index.html file in your web browser to view the application:

   open index.html

''' WebPage: Google API map

Google Maps API Key

This application uses the Google Maps JavaScript API. You'll need to provide your own API key to use the map functionalities.

1. Go to the Google Cloud Console.
2. Create a new project or select an existing project.
3. Enable the Google Maps JavaScript API.
4. Generate an API key.
5. Replace the YOUR_API_KEY placeholder in the index.html file with your API key:

Usage

1. Search for Places: Use the search box at the top-left corner of the map to search for places. The map will update to show the search results.
2. Draw on the Map: Use the drawing tools at the top-center of the map to draw markers, circles, polygons, polylines, and rectangles.
3. View Property Information: When a marker is placed, the application will display simulated property information in the panel at the bottom of the screen.

Project Structure

• index.html: The main HTML file containing the structure of the application.
• styles.css: The CSS file containing styles for the application.
• scripts.js: The JavaScript file containing the logic for initializing the map and handling user interactions.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes. Contact: guanghope01@gmail.com

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

• Google Maps JavaScript API

---