Import CSV Data for Google Maps API (Tutorial)

A single-page app for importing CSV data into the browser for display with the Google Maps API. The initial code credits from the YouTube tutorial modified.

What You Can Learn

• Google Maps JavaScript API (Geocoding API & Directions API)
• Generating PDFs Client-side
• JavaScript ES6 Syntax
• JavaScript Promises
• HTML5 Web Storage

Getting Started

1. Clone the repo and open the project.
2. Run npm install to install dependencies.
3. Run cp .env.example .env and add your Google Maps Platform API key.

Development

Run npm run dev to run the project using webpack-dev-server.

Build

Run npm run build to compile and generate build files in ./dist.

Development Tools and Libraries

• Webpack
• Babel
• jQuery
• Bootstrap 4
• Google Maps JavaScript API
• jsPDF
• jsPDF-AutoTable

Resources

• jsPDF-AutoTable Examples
• Google Maps URLs
• Google Maps Geocoding API Query Limit Issue
• Google Maps Geocoding API Queue Solution