![]() This is still a perfectly valid way of loading the API, but in modern JavaScript dependencies are normally dynamically included from code. If you have previous experience with the Maps JavaScript API, you may be familiar with loading it by inserting a script tag into an HTML file like this: This API provides a JavaScript interface for using all of the features of Google Maps Platform, including the map, markers, drawing tools, and other Google Maps Platform services, such as Places. The foundation of using Google Maps Platform for the web is the Maps JavaScript API. All done? Okay, time to build your first web app using Google Maps Platform! If you'd like to see the full solution code running, you can complete the setup steps above in the /solution directory.īefore you begin, please make sure you follow the steps in Getting Set Up. webpack-dev-server also automatically reloads your app in the browser any time you make code changes. The starter project has been set up for you to use webpack-dev-server, which compiles and runs the code you write locally. Once your dependencies are installed, run npm start in the directory. This installs all of the needed dependencies listed in package.json. Once you download the starter project, run npm install in the /starter directory. Everything you need to work with is located in the /starter/src directory. The starter project is located in the /starter directory and includes the basic file structure you need to complete the codelab. Download or fork the GitHub repo for this codelab at.Project starter template setupīefore you begin this codelab, do the following to download the starter project template, as well as the complete solution code: Node.js comes with the npm package manager, which you need to install dependencies for this codelab. If you do not already have it, go to to download and install the Node.js runtime on your computer. All requests to Google Maps Platform require an API key. You can follow the steps in this video or this documentation. Generate an API key in the Credentials page of Cloud Console.To do so, follow the steps in this video or this documentation. Enable the Google Maps Platform APIs and SDKs required for this codelab in the Google Cloud Marketplace.In the Cloud Console, click the project drop-down menu and select the project that you want to use for this codelab.If you do not already have a Google Cloud Platform account and a project with billing enabled, please see the Getting Started with Google Maps Platform guide to create a billing account and a project. Note: You need to sign in to an existing Google Account or create a new one as part of the sign-up process. Enable Google Maps Platform APIs and SDKs (listed in the previous section).If you haven't used Google Maps Platform before, follow the Get Started with Google Maps Platform guide or watch the Getting Started with Google Maps Platform playlist to complete the following steps: Basic knowledge of JavaScript, HTML, and CSS.A Google Maps Platform API key with the Maps JavaScript API enabled.A Google Cloud Platform account with billing enabled.To complete this codelab, you'll need the following accounts, services, and tools: MarkerClustererPlus open source marker clustering library.In this Codelab, you'll use the following Google Maps Platform products: If you are already familiar with working with Google Maps Platform, skip ahead to the Codelab! Required Google Maps Platform Products You'll need to familiarize with the items below to complete this Codelab. Working with the Maps JavaScript API event system to provide user interaction.Using markers, custom markers, and marker clustering.Loading the Maps JavaScript API dynamically from JavaScript code.Getting started with Google Maps Platform.Enables user interaction that recenters and draws a circle on the map when a marker is clicked.Displays custom markers for popular attractions in Sydney.Displays a map centered on Sydney, Australia.In this codelab, you build a simple web app that does the following: You learn all the basics, from getting set up to loading the Maps JavaScript API, displaying your first map, working with markers and marker clustering, drawing on the map, and handling user interaction. ![]() In this codelab, you learn everything you need to get started using Google Maps Platform for the web. ![]()
0 Comments
Leave a Reply. |