{"id":263,"date":"2025-03-20T08:31:20","date_gmt":"2025-03-20T08:31:20","guid":{"rendered":"https:\/\/documentation.iqonic.design\/handyman\/?p=263"},"modified":"2026-02-17T09:17:34","modified_gmt":"2026-02-17T09:17:34","slug":"generate-google-map-key","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/handyman\/generate-google-map-key\/","title":{"rendered":"Generate Google Map Key"},"content":{"rendered":"<div class=\"nolwrap\">\n<h2 class=\"wp-block-heading\">Step 1: Login to Google Cloud Console<\/h2>\n\n\n\n<p>Go to:<br>\ud83d\udc49 <a href=\"https:\/\/console.cloud.google.com\" target=\"_blank\" rel=\"noopener\">https:\/\/console.cloud.google.com<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to <strong>Google Maps Platform \u2192 Credentials<\/strong><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click <strong>Select a Project<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"463\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/Generate_Google_Map_Key1.png\" alt=\"\" class=\"wp-image-886\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"463\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/Generate_Google_Map_Key2.png\" alt=\"\" class=\"wp-image-887\" \/><\/figure>\n\n\n\n<p>(Option) <strong>If you don\u2019t have a project:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click <strong>New Project<\/strong><\/li>\n\n\n\n<li>Enter <strong>Project Name &amp; Location<\/strong><\/li>\n\n\n\n<li>Click <strong>Create<\/strong><\/li>\n\n\n\n<li>Once created, select the project.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"459\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/Generate_Google_Map_Key3.png\" alt=\"\" class=\"wp-image-888\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1292\" height=\"426\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/image-5.png\" alt=\"\" class=\"wp-image-2114\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Enable Required APIs<\/h2>\n\n\n\n<p>Go to:<br><strong>APIs &amp; Services \u2192 Library<\/strong><\/p>\n\n\n\n<p>Enable the following APIs:<\/p>\n\n\n\n<p>\u2705 Maps SDK for Android<br>\u2705 Maps SDK for iOS<br>\u2705 Maps JavaScript API (<strong>if using maps in web\/admin panel<\/strong>)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1598\" height=\"616\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/image-6.png\" alt=\"\" class=\"wp-image-2115\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Use Auto-Created API Key by Firebase \/ Create New API Key<\/h2>\n\n\n\n<p>Go to:<br><strong>APIs &amp; Services \u2192 Credentials<\/strong><\/p>\n\n\n\n<p>When you open the <strong>Credentials<\/strong> tab, if an <strong>API Key<\/strong> is already displayed (as shown in the image), and it was generated when you set up your <strong>Firebase project<\/strong>, then <strong>you can use the same key.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1576\" height=\"381\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/image-7.png\" alt=\"\" class=\"wp-image-2116\" \/><\/figure>\n\n\n\n<p><strong>Note: <\/strong>If no key is shown (as in the image below), then you need to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select your <strong>Project<\/strong><\/li>\n\n\n\n<li>Click on <strong>Create Credentials<\/strong><\/li>\n\n\n\n<li>Generate a new <strong>API Key<\/strong><\/li>\n<\/ul>\n\n\n\n<p>After that, you can use the newly created key in your project configuration.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"463\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/Generate_Google_Map_Key5.png\" alt=\"\" class=\"wp-image-890\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"464\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/Generate_Google_Map_Key6.png\" alt=\"\" class=\"wp-image-891\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"459\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/Generate_Google_Map_Key7.png\" alt=\"\" class=\"wp-image-892\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 4: Restrict the API Key (Recommended for Security)<\/strong><\/h2>\n\n\n\n<p>Click on the generated <strong>API Key<\/strong>.<\/p>\n\n\n\n<p>Now, for all the API keys shown in <strong>Step 3 (first image)<\/strong>, you need to verify one by one whether <strong>\u201cAPI Restrictions\u201d<\/strong> is <strong>ON or OFF<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If it is <strong>OFF<\/strong>, then you don\u2019t need to select anything.<\/li>\n\n\n\n<li>If <strong>API Restriction is ON<\/strong> (as shown in the image), then you must select the required APIs from the <strong>API dropdown list<\/strong>:<br>\u2714 Maps SDK for Android<br>\u2714 Maps SDK for iOS<br>\u2714 Maps JavaScript API (if you are using maps in the web\/admin panel)<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<p>After selecting the required APIs, click <strong>Ok<\/strong>.<\/p>\n\n\n\n<p>This ensures your <strong>API Key remains secure<\/strong> and works only for the <strong>required services<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1594\" height=\"752\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/image-9.png\" alt=\"\" class=\"wp-image-2118\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"647\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/image-8.png\" alt=\"\" class=\"wp-image-2117\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Configure Google Map API Key in Your Project<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">1\ufe0f\u20e3 Add Google Map Key in Flutter App<\/h2>\n\n\n\n<p>Paste the copied API key in your Flutter project as per Android configuration.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"431\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/Generate_Google_Map_Key8.png\" alt=\"\" class=\"wp-image-893\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">2\ufe0f\u20e3 Add Google Map Key in Admin Panel<\/h2>\n\n\n\n<p>Login with <strong>Super Admin<\/strong> credentials.<\/p>\n\n\n\n<p>Go to:<br><strong>Settings \u2192 Site Setup<\/strong><\/p>\n\n\n\n<p>Find the <strong>Google Map Key<\/strong> field.<\/p>\n\n\n\n<p>Paste the API key and click <strong>Save<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1592\" height=\"738\" src=\"https:\/\/documentation.iqonic.design\/handyman\/wp-content\/uploads\/sites\/9\/2025\/03\/image-3.png\" alt=\"\" class=\"wp-image-2112\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3\ufe0f\u20e3 Add Google Map Key in Server (.env file)**<\/h2>\n\n\n\n<p>Open your server project.<\/p>\n\n\n\n<p>Locate the <strong>.env<\/strong> file in the root directory.<\/p>\n\n\n\n<p>Add or update the Google Map API Key.<\/p>\n\n\n\n<p>After updating (for Laravel projects), run:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">php artisan config:clear<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 Final Result<\/h2>\n\n\n\n<p>Once completed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Google Maps will work in the mobile app<\/li>\n\n\n\n<li>Maps will load properly in the admin panel<\/li>\n\n\n\n<li>Location-based features will function correctly<\/li>\n<\/ul>\n\n\n\n<p>Your Google Map setup is now complete \ud83d\ude80<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Step 1: Login to Google Cloud Console Go to:\ud83d\udc49 https:\/\/console.cloud.google.com (Option) If you don\u2019t have a project: Step 2: Enable Required APIs Go to:APIs &amp; Services \u2192 Library Enable the following APIs: \u2705 Maps SDK for Android\u2705 Maps SDK for iOS\u2705 Maps JavaScript API (if using maps in web\/admin panel) Step 3: Use Auto-Created API [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":259,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-263","post","type-post","status-publish","format-standard","hentry","category-handyman-services"],"featured_image_src":null,"author_info":{"display_name":"laraveladminiq","author_link":"https:\/\/documentation.iqonic.design\/handyman\/author\/laraveladminiq\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/posts\/263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/comments?post=263"}],"version-history":[{"count":8,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/posts\/263\/revisions"}],"predecessor-version":[{"id":2123,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/posts\/263\/revisions\/2123"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/posts\/259"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/media?parent=263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/categories?post=263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/tags?post=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}