How To Get The Google API Key Code?

The Google Maps API key identifies the project used for requests to Google Maps services and for usage and billing. For NBDesigner's optional static-map tool, enable the needed Maps service and restrict the key for the way your site makes requests. The key alone does not prevent misuse.

For stores using NBDesigner, a product design plugin from Cmsmart, the optional Google Maps tool can place static map imagery in a design when configured. Check the feature in your installed version and test it on a product; the effect on customer experience depends on the use case.

This guide explains how to create and restrict a Google Maps API key and how to check the optional static-map setting in the NBDesigner plugin for WordPress. Google Cloud and plugin labels can vary by version.

1. What Is a Google Maps API Key?

A Google Maps API key identifies the Google Cloud project making requests to Google Maps services. It is not proof that a request is trusted. Apply an application restriction and an API restriction suited to the actual request path, then monitor usage and billing.

Why Do You Need an API Key?

• To use the optional static-map feature with Maps Static API; Maps Embed API and interactive maps are separate options to enable only if your site uses them.
• To track usage and monitor performance via Google Cloud Console.
• To reduce unauthorized use by restricting the key to the APIs and request sources your application actually needs.

2. Step-by-Step Guide to Obtaining a Google Maps API Key

Prerequisites

1. A valid Google Account.
2. A billing account linked to the Google Cloud project for Maps usage. (Review current terms for any trial credit.)

Step 1: Access Google Cloud Console

1. Open the Google Cloud Console in your browser.
2. Log in using your Google account credentials.

Step 2: Activate Billing

1. If this is your first Google Cloud project, follow the current billing setup shown for your account.
2. Review the billing setup and any payment method requested for your account. Charges and trial credits depend on current Google terms; check pricing and set budget alerts before using the service.

Step 3: Create a New Project

1. After signing in, open the project selector in Google Cloud Console.

2. Select an existing project or choose New Project if you need one.

3. Fill out the project details:

• Project Name: Enter a name that reflects the purpose of the project (e.g., “NBDesigner Maps Integration”).
• Location: Leave as the default or specify a folder if using an organization account.

4. Click “Create” to finalize your project.

Step 4: Enable APIs for Your Project

1. In the API Library of the Google Cloud Console, find the APIs the configured feature actually calls. NBDesigner's static-map design tool needs Maps Static API; the following APIs serve different use cases:

• Maps JavaScript API: For interactive maps, if your site actually uses them; it is separate from the static-map tool.
• Places API: For place search or autocomplete when used. Geocoding is a separate API.
• Maps Embed API: For supported embedded maps when used; it is separate from Maps Static API.

2. Click Enable only for the APIs your implementation uses, starting with Maps Static API for the optional static-map tool.

Step 5: Generate the API Key

1. Open the Keys & Credentials page for the selected project.
2. Click + Create credentials and select API key.
3. Copy the new key into a secure place for configuration. Do not post an unrestricted key in documentation or public code; apply restrictions before use.

Step 6: Secure and Restrict Your API Key

Restrictions reduce the risk of unauthorized API-key use and charges. Choose the application restriction based on whether the map request comes from a visitor's browser or your server; do not publish a server-side web-service key in page code. If your implementation publishes Maps Static image URLs, Google recommends signing those URLs on the server and protecting the signing secret. Check whether your plugin or surrounding integration supports server-side URL signing before using it; this guide does not assume NBDesigner does. Review the allowed unsigned-request quota for your project as well.

1. Restrict by Application Type:

• Open the Application restrictions settings for the key.
• If a visitor's browser loads the static map, choose Websites and replace the example with your real authorized referrer pattern (for example, https://your-domain.example/*), then test it. For server-side requests, use a separately stored IP-restricted key.

2. Restrict by API:

• Under API Restrictions, select Restrict Key.
• Allow Maps Static API for the optional static-map tool and other APIs only when your site calls them.

3. Click Save to apply restrictions.

3. How to Use the API Key with NBDesigner

After creating and restricting the key, use these checks for the optional NBDesigner Plugin static-map tool on your WordPress site. Confirm the menu and field labels in your installed version before entering a key.

Step 1: Access NBDesigner Settings

1. Log in to your WordPress admin panel.
2. In your installed version, locate NBDesigner > Settings or its corresponding settings page.

Step 2: Enter the API Key

1. If present, locate the Google Maps Static API Key field in the plugin settings.
2. Enter the key configured for the relevant Maps Static request path; do not reuse an unrestricted key.

Step 3: Enable Google Maps Features

1. Look for Settings > Design Tools or the corresponding design-tool panel in your installed NBDesigner version.
2. If available, turn on Enable Static Google Maps for the product design tool.

Step 4: Save and Test

1. Save the changes in your WordPress settings.
2. Open a product customization page and verify that the static map loads. If it fails, inspect the key restrictions, enabled API, billing, and your plugin version.

4. About Cmsmart and Our Solutions

Cmsmart develops ecommerce tools, including product design options for online stores.

Our Expertise

For ecommerce teams, we offer tools for product design and related store workflows. Confirm the features in your product version and test the configured map tool for your use case. Key offerings include:

• NBDesigner Plugin: Offers an optional static-map design tool when the supported plugin version and Maps API are configured.
• Order Management Tools: Help manage custom orders and designs where those tools are configured.
• Custom Design Features: Include options such as typography, freehand drawing, and image use, depending on the product setup.

Explore more about our offerings at Cmsmart.net.

5. Additional Resources and Support

Video Tutorial

Watch our step-by-step guide on configuring the Google Maps API Key for NBDesigner.

Live Demo

Explore the available features of the NBDesigner Plugin in our LIVE DEMO.

Support Team

Have questions about the key or plugin setting? Contact our support team for help checking your version and troubleshooting the configured map feature.

Once the key, billing, API, and plugin setting are configured, test a product customization page to confirm that a static map appears as expected. Usage costs and results depend on your setup. Explore NBDesigner and Cmsmart options for your store.

You can watch the video tutorial below:

OTHER ITEMS

NetBase provides Template, Extensions, and e-commerce solutions for open source: WordPress, Magento, Joomla Virtuemart. Other awesome items also come from NetBase Team:

You can refer to the great products and features of WooCommerce online Product Design plugin here: Check Out

You can visit the demo here: Visit Demo

When configured for your store, the�Online Product Design Plugin�can let customers personalize designs with available tools. If you have trouble with the product or optional map feature, please�contact us�for support.