This is a minimal JavaScript Webpack project for setting up and incorporating the google maps API in a website.
It uses the great load-google-maps-api package npm package to initialize the google maps API. The package's loadGoogleMapsApi() function returns a promise which resolves to the google maps object required to create google maps. This project also uses dotenv-webpack to protect the google maps API key
To build the project
- Clone the project from https://github.com/philrmass/minimal-google-maps-api.git to a local directory
- In a terminal, go into the root project directory and install the dependencies with:
npm install
- Get an API key from the Google Maps JavaScript API site
- Create a file named .env in the root project directory of your project with the following content (replacing the X's with your actual API key)
GOOGLEMAPS_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- Build the project with:
npm run build
- Build and start up the project on a development server with:
npm run start
- Or, if you are on Windows, use:
npm run winstart
It should open the application in a browser window at the address localhost:8080, where you can test out the app. You should see something like this:
If you have any issues or questions, please email me at philrmass@gmail.com
Created using JavaScript. Built with Webpack, Babel, ESLint, DotEnv, and the load-google-maps-api package
Copyright (c) 2019 Phil Mass