Enter the API Key for the Google Matrix API in Javascript to access and retrieve usage data

I have successfully implemented the Google Matrix API to retrieve time and distance information from location A to location B.

var origins = [Task.getItem("Y") + "," + Task.getItem("X")];
            var destinations = [LAT + "," + LNG];

            var distanceMatrix = new google.maps.DistanceMatrixService();
            var distanceRequest = {
                origins: origins,
                destinations: destinations,
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            };
            distanceMatrix.getDistanceMatrix(distanceRequest, function(response, status) {
                if (status != google.maps.DistanceMatrixStatus.OK) {
                    alert('An error occurred: ' + status);
                } else {
                    var origins = response.originAddresses;
                    var destinations = response.destinationAddresses;
                    
                    if (response.rows[0].elements[0].distance != null) {
                        totalDistance = response.rows[0].elements[0].distance.value;
                        totalTime = response.rows[0].elements[0].duration.value;
                        ratioPerOneMeter = totalDistance / totalTime;
                        PRDifference = 0;

                        updateDistanceAndTime();

                    } else {
                        alert("Unable to calculate Distance And Time");
                    }
                }
            });

My next step is to add the API key, but I am unsure of how to do so. I tried adding the API key in the script tag:

<script src="http://maps.googleapis.com/maps/api/js?key={KEY}&v=3.exp">

as suggested on Using a Google Apps API key with Distance Matrix

However, I believe this may only be for the map and not the matrix API. Can someone confirm if this approach is sufficient?

Answer №1

The Google Maps Distance Matrix Service in the Google Maps Javascript API utilizes the API key included in the script tag.

<script src="http://maps.googleapis.com/maps/api/js?key={KEY}">

It's important to note that this specific usage is not individually tracked in the developer console. The usage data under "Google Maps Distance Matrix API" pertains solely to the Web Service implementation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Scrapy and Selenium to interact with dynamic elements on a webpage

When I crawl the page, I come across an element that looks like this. <a class="a-declarative" href="javascript:void(0)" data-action="a-expander-toggle" data-a-expander-toggle='{"allowLinkDefault":true, "expand_prompt":"See more", "collapse_pro ...

adjusting the size of the sidebar at the top to ensure that it does not overlap the top menu

I have a sidebar on my page that opens vertically when I click a button. The sidebar covers the company logo and name, so I want to make it smaller. Here is the code for the sidebar: <body> <nav class="navbar navbar-dark bg-dark" ...

Retrieving information from the second .getJSON request

I am encountering an issue where I have set up the site to make two consecutive API calls, but I am facing difficulty in fetching data from the second call and displaying it in my div. $(document).ready(function() { $(".discogs-loading").show ...

Set the property state to false based on the value of another property in Mongoose Express NodeJS

I am trying to update the status property of a sale based on the outstandingBalance value being equal to 0. Currently, I am able to successfully update the "outstandingBalance", but I want to automatically change the status if it reaches 0. Below is the c ...

Tips for organizing data and dynamically linking options to another select value?

One of my challenges involves working with two select elements. The first select allows for multiple options, while the second select is dependent on the choice made in the first one. <select class="form-control" id="select1"> <option value=""& ...

Accessed a property that is not defined on the instance during rendering

One of the components I'm working on displays data that is defined in the component's state. To access this data, I created a getter: export default createStore({ state: { foo: true, }, getters: { getFoo: state => state.fo ...

What is the method by which frameworks such as Angular encapsulate CSS within a component?

I have a question out of curiosity, rather than seeking a solution to a specific issue. Can you explain how frameworks such as Angular manage to keep CSS contained within a component and prevent it from spreading across the entire webpage? ...

Executing a search within the current connection in Node.js

In the code snippet provided, the need is to execute the second SQL query (query2) after constructing it based on the results of the first query (query1). However, even though the second query is successfully built, it is not being executed. Assistance i ...

Displaying only one piece of information instead of multiple pieces of information from a row in Javascript

Showing the CSV data that was retrieved, with the desired output as follows: Price: 955.99 EPS: 29.59 Date : 7/14/2017 Unfortunately, the actual output appears like this: https://i.sstatic.net/zMVCo.png The data is displayed in a row, separated by col0 ...

Tips for extracting an XML value from an API

I'm attempting to showcase a value retrieved from an API (specifically used by PRTG software to extract information). Here is the link to the API: The API provides an XML file structured like this: <?xml version="1.0" encoding="UTF-8"?> <ch ...

Proper utilization of an interface with a literal object

I've been encountering some challenges with TypeScript. Let's say you have a literal object where the value is assigned using the spread operator: const defaultState = () => { return { profile: { id: '', displayName ...

Refresh the component data according to the vuex state

In order to streamline my workflow, I am developing a single admin panel that will be used for managing multiple web shops. To ensure that I can keep track of which website I am currently working on, I have implemented a website object in my vuex state. Th ...

Displaying nested router component independently in React.js

Welcome everyone :) This is my first question here. (Although there were similar questions, none of them addressed my specific code issue and I was not successful in applying their solutions.) I am trying to render the child component in a nested route wi ...

How can I delete the Location Box from Google Maps that appears in the top left corner?

My goal is to display all warehouse locations from Google Maps on my website by utilizing Google Map's iframe: <iframe src="http://maps.google.com/maps?q=118+Lamington+Rd.+–+Bateman+Student+Center,+Branchburg,+NJ+08876&amp;output=embed" fram ...

How can I show the unique phrase "Today" on a specific date (date=today) with the Angular-UI-Bootstrap Datepicker?

I'm currently integrating the Angular-UI datepicker directive into my project and I'm facing an issue. I want to have the datepicker display 'Today' instead of the actual date like 2015/04/27. Is there a way to achieve this without hav ...

The absence of a backslash in the JSON string is noticed upon uploading it to the database

After using the JSON.stringify() method in JavaScript to convert my JSON object into a JSON string, I insert it into a database via AJAX posting to a PHP file. $("#saveToDatabase").click(function(){ var place = searchBox.getPlaces(); var locati ...

Can a node package be imported from a different package?

If I recently installed the react-native-gifted-chat package from npm and discovered it includes another package, how can I access the uuid package located within that package? This is what's inside my node_modules folder: https://i.sstatic.net/wf9t ...

Ways to activate a special function after clicking a social media button?

My goal is to implement a social media div locker on my website. The concept involves hiding a piece of text behind a div locker that prompts the user to share the content on Facebook, Google+, or Twitter in order to unlock it. After the visitor clicks on ...

Encountering 404 Errors while Attempting to Reach API Endpoint in an Express.js Application Hosted on cPanel

I have a Node.js application running on cPanel, and I'm facing 404 errors when trying to access an API endpoint within my app. Let me provide you with the setup details: Directory Structure: public_html/ server.mjs index.html node_modules ...

Issue with the functionality of Jquery scrolling through thumbnail images animation

I have encountered an issue related to the previous question that I posted here. After successfully implementing the provided solution, it initially seemed to be working. However, when I clicked the next button and reached the 3rd click, the jQuery scrolli ...