New basemap styling is coming soon to Google Maps Platform. This update to map styling includes a new default color palette, modernized pins, and improvements to map experiences and usability. All map styles will be automatically updated in March 2025. For more information on availability and how to opt in earlier, see New map style for Google Maps Platform.
- Home
- Products
- Google Maps Platform
- Documentation
- Web
- Maps Embed API
- Guides
Place an interactive map, or Street View panorama on your web page with a simpleHTTP request—no JavaScript required.
Costs
All Maps Embed API requests are available at no charge withunlimited usage. However, all requests still require a valid Google Cloud API key. For more information, see Usage and Billing.
Before you begin
To create an embedded map on your web page, complete the required setup steps byclicking through the following tabs:
Step 1
Console
-
In the Google Cloud Console, on the project selector page, click Create Project to begin creating a new Cloud project.
Go to the project selector page
-
Make sure that billing is enabled for your Cloud project. Confirm that billing is enabled for your project.
Google Cloud offers a $0.00 charge trial. The trial expires at either end of 90 days or after the account has accrued $300 worth of charges, whichever comes first. Cancel anytime. Google Maps Platform features a recurring $200 monthly credit. For more information, see Billing account credits and Billing.
Cloud SDK
gcloud projects create "PROJECT"
Read more about the Google Cloud SDK , Cloud SDK installation , and the following commands:
- gcloud projects create
Step 2
To use Google Maps Platform, you must enable the APIs or SDKs you plan to use with your project.
Console
Enable the Maps Embed API
Cloud SDK
gcloud services enable \ --project "PROJECT" \ "maps-embed-backend.googleapis.com"
Read more about the Google Cloud SDK , Cloud SDK installation , and the following commands:
- gcloud services enable
- gcloud services disable
Step 3
This step only goes through the API Key creation process. If you use your API Key in production, we strongly recommend that you restrict your API key. You can find more information in the product-specific Using API Keys page.
The API key is a unique identifier that authenticates requests associated with your project for usage and billing purposes. You must have at least one API key associated with your project.
To create an API key:
Console
-
Go to the Google Maps Platform > Credentials page.
Go to the Credentials page
- On the Credentials page, click Create credentials > API key.
The API key created dialog displays your newly created API key. - Click Close.
The new API key is listed on the Credentials page under API keys.
(Remember to restrict the API key before using it in production.)
Cloud SDK
gcloud alpha services api-keys create \ --project "PROJECT" \ --display-name "DISPLAY_NAME"
Read more about the Google Cloud SDK , Cloud SDK installation , and the following commands:
- gcloud alpha services api-keys create
Generating an iframe
Click through the following options and add a location and API key to generatean iframe for your webpage. For additional parameters and options, see Embedding a map.
Testing your iframe
To see your iframe in an HTML browser window:
- Open your default text editor. You should have text editors such asTextEdit or Microsoft Windows Notepad installed on your device by default.
- Create an HTML file and name it
index.html. Add the following code with the iframe you generated above:
<html> <!-- Replace this code comment with your iframe. --></html>Save your
index.htmlHTML file.Load the HTML file in a web browser by dragging it from your desktop ontoyour browser; alternatively, double-clicking the file works on mostoperating systems.
Congratulations! You just set up and built a map using theMaps Embed API.
Cleaning up
You can delete your Google Cloud project to stop billing for all the resources used within that project.
- In the Google Cloud Console, go to the Manage resources page:
Go to the Manage resources page
- If the project that you plan to delete is attached to an organization, select and expand the organization list at the top of the page.
- In the project list, select the project that you want to delete and click Delete.
- In the dialog, type the project ID and click Shut down to delete the project.
Next steps
Start developing with the Maps Embed API by setting up yourGoogle Cloud project:
Set up in Cloud Console
For a list of additional parameters and options you can add in your iframe:
Embedding a map
Extend your Maps project with the Javascript API:
Maps Javascript API
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-09-12 UTC.
[{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }]
