diff --git a/README.md b/README.md index 647bd6b37..79740a753 100644 --- a/README.md +++ b/README.md @@ -83,4 +83,5 @@ Potential Topics-- - Product Management 1. Beginner's guide to product management and becoming a successful product manager - Other useful resources + 1. Google Maps JavaScript API - Teamwork diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index 738db448b..586b15652 100644 --- a/Topics/Tech_Stacks.md +++ b/Topics/Tech_Stacks.md @@ -1,6 +1,7 @@ ## Tech Stacks ### [Learning MySQL for databases](./Tech_Stacks/Learning_MySQL.md) +### [Google Maps JavaScript API](./Tech_Stacks/Google_Maps_API.md) ### [Postman API Testing](./Tech_Stacks/Postman_Backend_Testing.md) ### [Nuxt3](./Tech_Stacks/Nuxt3.md) ### [Building Apple Native Software Using Swift and SwiftUI](./Tech_Stacks/swift.md) @@ -10,4 +11,3 @@ ### [Learning PostgreSQL and psycopg2](./Tech_Stacks/PostgreSQL_psycopg2.md) ### [CSS](./Tech_Stacks/CSS.md) ### [Learning TypeScript](./Tech_Stacks/TypeScript.md) - diff --git a/Topics/Tech_Stacks/Google_Maps_API.md b/Topics/Tech_Stacks/Google_Maps_API.md new file mode 100644 index 000000000..be555c9d8 --- /dev/null +++ b/Topics/Tech_Stacks/Google_Maps_API.md @@ -0,0 +1,65 @@ +# Google Maps Javascript API + +## Table of contents +### [Introduction](#introduction-1) +### [Requirements](#requirements-1) +### [Basic Google Map Integration](#basic-google-map-integration-1) +### [Embedding a Google Map on a React Website](#embedding-a-google-map-on-a-react-website-1) +### [Common Issues](#common-issues-1) + +## Introduction + +The following is a simple introduction to utilizing Google Maps Javascript API to embed custom maps on a website. This article assumes some basic knowledge of HTML, CSS, JavaScript, and Node.js + + +## Requirements + +To use this API, the user should have Node.js installed and configured correctly. Additionally, users need to sign up for a Google Developer account, and set up their Google Maps Javascript API key, by adding a payment method to their account and following this guide. + +https://developers.google.com/maps/documentation/embed/get-api-key + +In their project, users must make sure to load the Google API script correctly, by specifying their unique Google Map API Key or else their map will not load correctly. For example, + +`src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"` + +In this example, `AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg` is the unique key id. + + +## Basic Google Map Integration + +Google has an introductory guide on their developers website that details the process to integrate a simple Google Map with custom markers on a website. + +https://developers.google.com/maps/documentation/javascript/adding-a-google-map#maps_add_map-javascript + +Note that this guide DOES NOT work for a React website, users working in a react environment must follow the "Embedding a Google Map on a React Website" section. + +Users must make sure to edit the `