Alternatively, double-clicking the file works on most Load the HTML file in a web browser by dragging it from your desktop onto Save this file with a name that ends with. (that's the API key that you've just obtained). Replace the value of the key parameter in the URL with your own API key To prevent quota theft and secure your API key, seeĬopy the entire code of this tutorial from this page, to your text editor. With browser restrictions, you may use that key. Note: If you have an existing unrestricted API key, or a key On the Credentials page, get an API key (and set the API key Maps JavaScript API using your own API key.Ĭlick Continue to enable the API and any related services. This section explains how to authenticate your app to the The code below constructs a new Google maps object, and adds properties to the Use a script tag to include your own JavaScript whichĪdd the document.getElementById() function to find the map div on the web The code below contains the initMap function that initializes and adds the map See Step 3: Get an API key for instructions on getting your
Once it has loaded, theīrowser will pause and immediately execute the script. Parse the remainder of your page while the API loads. The async attribute allows the browser to continue to
In the above code, the callback parameter executes the initMap functionĪfter the API loads. In the code below, the script loads the API from the specified URL. CodeSandbox.io GitPod.io Google Cloud Shell Understanding the code Web page, and how to write your own JavaScript that uses the API to add a map This section shows you how to load the Maps JavaScript API into your In thisĬase, the div is set to a height of 400 pixels, and width of 100% to display
Set theĭiv width and height to greater than 0px for the map to be visible. In the above code, the style element sets the div size for your map. Width: 100% /* The width is the width of the web page */ Height: 400px /* The height is 400 pixels */ * Set the size of the div element that contains the map */ The code below describes the CSS that sets the The code below defines an area of the page for your Google map.Īt this stage of the tutorial, the div appears as just a grey block, because You can add a heading level three above the map using the code below.
The code below creates an HTML page consisting of a head and a body. You can add any content you like to the web page. Note that this is a very basic page with a heading level three ( h3) and a Here's the code for a basic HTML web page: (recommended), Firefox, Safari or Edge, based on your platform from the Choose a well-known one like Google Chrome There are three steps to creating a Google map with a marker on your web page: CodeSandbox.io GitPod.io Google Cloud Shell Getting started
0 kommentar(er)
