Skip to content

Latest commit

 

History

History
74 lines (48 loc) · 2.5 KB

cloud_shell_instructions.md

File metadata and controls

74 lines (48 loc) · 2.5 KB
Raw

Run a Google Maps Platform JS sample in Google Cloud Shell

Introduction

This tutorial will walk through the process of running a web application from the sample using TypeScript and Vite.

For feedback related to this sample, please open a new issue on GitHub.

Click the Start button to continue.

Install and run the application

Open Cloud Shell by clicking the button in the navigation bar in the upper-right corner of the console.

To install the application and its requirements, run the following command.

npm i

After installation, Vite can be called using the following command.

npm start -- --port=8080

For configuration of Vite, check vite.config.js.

Enable Web Preview in the Google Cloud Shell

Once your app is built (should take a few moments), you can launch it via Web Preview button using the port 8080.

Update the Google Maps API key

The application is currently using the .env file to embed the API key in the HTML document. This is a temporary key and is not valid for production usage.

The key can be replaced by following these instructions to get an api key.

After changing the key, the Webpack server must be restarted with the following command:

npm start -- --port=8080

Inspect and edit the application files

There are three main files for this sample:

  • src/index.ts
  • src/index.html
  • src/style.css

Try editing the src/index.ts file and see how the web application in the web preview immediately reloads with the changes.

Conclusion

Congratulations! You've just launched a web application using the Google Maps Platform JS API.