DEV Community

Cover image for Map API🌎
kishore kumar
kishore kumar

Posted on

Map API🌎

Using an already existing API to our advantage is far better and easier than creating one from scratch.

I have used this on my website and it is super easy and free.


How to get Google Map API🌎

  1. Go to the Google Cloud Platform Console.

  2. Click the project drop-down and select or create the project for which you want to add an API key.

  3. Click the menu button and select APIs & Services > Credentials.

  4. On the Credentials page, click Create credentials > API key.

  5. The API key created dialog displays your newly created API key.

  6. Click Close.

  7. The new API key is listed on the Credentials page under API keys. (Remember to restrict the API key before using it in production.)


Add the API key to your request😉

You must include an API key with every Maps JavaScript API request. In the following example, replace YOUR_API_KEY with your API key.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>

Steps in Detail

  1. Go to Alt Text

  2. Press the 'Get Started' button. In the window that opens, tick both 'Maps' and 'Places'. Press Continue. At this stage, you will be asked to create a Google account or log in to your existing one. Alt Text

  3. In the updated window, choose 'Select a project' and enter the project name (e.g. Set Compass) in the box below. Then click Next.
    Alt Text

  4. In the updated window, click Create Billing Account

  5. After clicking Next in Step 2, will be offered to enable your APIs. Press Next.

  6. You will see a new window with your API key in the box. Save the key to be able to use it and press Done. Alt Text

7.(Optional) To protect your API Key and prevent anyone else from using it, click on credentials in the left pane then click on the project name as shown below. Alt Text

8.(Optional) From Application restrictions select HTTP referrers (Web sites), enter https://setcompass.com/* in the Accept requests from these HTTP referrers (Web sites). Then click Save. Alt Text

9.Finally go to the registration page at setcompass.com, fill in all the fields and paste your copied Google Maps API Key as shown below. Alt Text


Reference📚

Google API

Top comments (0)