← 全部工具

harrystaley/UD_FEND-FSND_Neighborhood_Map

热度 60 更新于 开发与构建

Responsive web app showcasing an interactive neighborhood map using Google Maps API, developed for Udacity's Nanodegree programs.

githubauto-collected

安装

暂未验证可直接使用的安装命令,请查看项目官方文档或 Release。

# UD_FEND-FSND_Neighborhood_Map

## Overview

The **UD_FEND-FSND_Neighborhood_Map** is an interactive web application designed to explore neighborhood maps using the Google Maps API. This project is part of Udacity's Front-End Nanodegree program, aiming to enhance skills in web development and API integration.

## Features

- **Interactive Map**: Explore neighborhoods with a user-friendly map interface.
- **Google Maps API Integration**: Leverage Google Maps for accurate and up-to-date geographic data.
- **Responsive Design**: Ensure compatibility across various devices and screen sizes.
- **Dynamic Markers**: Display points of interest with information pop-ups.

Setup and Installation

To set up the project locally, follow these steps:

  • Clone the Repository:
   git clone https://github.com/yourusername/UD_FEND-FSND_Neighborhood_Map.git
  • Navigate to the Project Directory:
   cd UD_FEND-FSND_Neighborhood_Map
  • Install Dependencies:

Ensure you have npm and node.js installed. Then, run:

   npm install
  • Obtain a Google Maps API Key:
  • Go to the Google Cloud Console.
  • Create a new project.
  • Enable the Maps JavaScript API.
  • Generate an API key.
  • Configure the API Key:
  • Replace YOURAPIKEY in your project files with the actual API key obtained from Google Cloud Console.
  • Run the Application:
   npm start

Open your browser and navigate to http://localhost:3000 to view the app.

Usage

  • Explore the Map: Use the map to navigate through different neighborhoods.
  • View Information: Click on markers to see more details about specific locations.

Contribution Guidelines