Storing Routes from Google Maps

I have a geojson file containing multiple points. When using the Google Maps JS API v3 for routing between these points, I am receiving an OVER_QUERY_LIMIT error due to making too many requests at once.

Currently, I have managed to address this issue by delaying my routing requests. However, this is not a sustainable solution as it significantly slows down the process of drawing the complete route.

My goal is to implement a caching system for the routes. The cache would only need to be invalidated when the geojson file is updated, which typically occurs once a week.

Since it is a static site hosted on GitHub project pages, all the client-side logic is written in JavaScript. I am unsure if Jekyll (a tool for GitHub pages) or a Travis-CI script could help in implementing this caching feature. Any suggestions?

EDIT: To clarify, I only require caching of the polyline to draw the route. I do not need detailed driving directions or the ability to edit the route via drag-and-drop.

javascriptgoogle-mapscachinggoogle-maps-api-3github-pages

Answer №1

  • If you prefer, you have the option to utilize cookies for storing data on the client side. Save a date and the array of polypoints in a cookie. If there is no cookie present or it is outdated, send a request; otherwise, simply display the polygon on the map.

Personally, I suggest using PHP or a similar tool to store the information on the server, even though I understand that may not be what you're looking for.

Answer №2

To solve this problem, I decided to create a node.js script that automatically produces a polyline file detailing the route. This polyline can then be displayed directly on the map. Despite the occasional changes in the route, I find it manageable to manually execute this step.

Although it has been some time since I implemented this solution, I believe that the following link contains the most recent version of the script used for generating the polyline: https://github.com/Tobbe/highpointing/blob/master/lib/route_creator.js

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

What prevents the application of Prop to a component in a Vue.js component library?

As part of streamlining our development process, I am currently in the process of migrating my components from various projects into a centralized component library. This move is aimed at improving ease of use and maintainability. To achieve this, I am ut ...

javascriptvue.jsvue-componentmdbootstrap

generate an array composed of promises to be used with Promise.all

Currently, I am working with an array of file paths and my goal is to read all the files inside a Promise.all function, followed by carrying out several tasks. var files = ["./file1.txt", "./file2.txt"] Promise.all(files.forEach(file=>{ /* read file ...

javascriptpromisees6-promise

Utilizing JQuery Template to Invoke JavaScript Functions

If I have the following JSON object structure: ITEMS is an array with one element, and FILTER is another array with 3 items in it. Description: "churches with some restrictions" ITEMS: {...} [0]: {...} FILTER: {...} ...

javascriptjqueryjsontemplatesjquery-templates

React functional components with checkboxes can trigger rerenders

I'm currently working with Gatsby and have a functional component that iterates through a set of data to generate a radio button group with an onchange event and a checked item. Whenever I update the state, the entire page component re-renders. I thou ...

javascriptreactjsreact-hooksgatsby

Angular/RXJS - Synchronize with AJAX response before proceeding

export class DropDownService { private dockerURL; constructor(private infoService: InfoService){ this.infoService.getVersion().subscribe((URL) => { this.dockerURL = URL; }); // Ensuring the ...

javascriptangularrxjs

Analyzing Object Arrays with Chart.js

Using Chart.js version 3.8.0 (the latest release) Hello everyone I'm really struggling with this right now. I was able to successfully display the chart once, but now it's failing to render and I have no clue why. Prior to setting the chart op ...

javascriptchart.js

jquery unable to retrieve element

I have implemented a piece of code that adds the 'nav-pills' class to an element with the class 'nav-tabs' when the window width is less than 768px. $(window).on('resize', function () { $('.nav-tabs').toggleClass(&a ...

javascriptjquery

The issue arises when attempting to use input alongside debounce, event.persist(), and storing the value at the parent component

Is there a way to implement an input field with debounced search where the value is passed from the parent component? Currently, when I pass the value from the parent component it doesn't work as expected. What would be the correct approach to make th ...

javascriptreactjsdebouncing

Interactive PNG Sequence Rotation: Explore 360 Degrees

I am facing an issue with my PNG sequence of 360 images, where each image corresponds to a degree of rotation. Currently, I have a React component that updates the rotation based on the mouse position in the window - with x = 0 corresponding to rotation = ...

javascriptreactjsmath

Enhancing depth perception in three.js without distorting the foreground

I am facing a challenge with my three.js scene where I have a floor plane with a specific texture that needs to align perfectly with a 2D overlay. The issue arises when I try to adjust the camera FOV to achieve the desired perspective. Increasing the FOV ...

javascriptthree.js

When dynamically creating content with .html(), the JavaScript styling does not get applied properly

As I work on creating a mobile website using Cordova, I've come across an interesting javascript framework called nativedroid2. This framework offers ready-made html classes and effects that can be applied to the code. Currently, my goal is to dynami ...

javascriptjqueryhtmlcssjquery-mobile

Euler 13: Surprising outcome when attempting to combine several String variables

I'm currently working on a challenging problem found on euler: here Large sum Problem 13 In this problem, the task is to determine the first ten digits of the total sum when adding up one-hundred 50-digit numbers. 37107287533902102798797998220837590 ...

javascriptnode.js

Error in the code causing images to shift positions

My JavaScript code is encountering a strange glitch, and I'm not sure if it's related to my math calculations or the way my code is structured. The concept behind my project involves left-clicking and dragging to scroll through a map displayed o ...

javascript

React/Redux encountered a roadblock when attempting to iterate through an array stored in the state

Currently, I am delving into the world of React/Redux and have encountered a stumbling block while transitioning one of my single-page web applications to this framework. What I aim to achieve is to populate an array in the initial state of the web app wit ...

javascriptreactjsredux

Send a React component to another component as a prop

I am looking to pass the entire parent component as props to its child component. However, when attempting to pass data from parent to child, I ended up importing the child into the parent. Is there another way to achieve this? Any suggestions on how I c ...

javascriptreactjs

Issue with Magento site: Clicking on thumbnail photo does not update the large photo on mobile devices

As I navigate through a Magento site, I encounter a problem with the thumbnail images not reloading the larger image when clicked. Instead, the browser jumps to the top of the page and a hash symbol gets added to the URL. Based on this behavior, I suspect ...

javascriptjquerymagentomobileprototypejs

Below are the steps to handle incorrect input after receiving only one letter:

H-I This is my input .centered-name { width: 80%; margin: auto; } .group { width: 100%; overflow: hidden; position: relative; } .label { position: absolute; top: 40px; color: #666666; font: 400 26px Roboto; cursor: text; transit ...

javascripthtmlcss

Making AJAX requests to retrieve data from a JSON database array, then utilizing the CSS visibility property to conceal HTML elements dynamically

As a enthusiastic beginner, I'm facing a challenge that seems to have no easy solution. Can someone please assist me with this: How can I assign all the ids from a JSON database to the variable dotContainer, in order to hide all corresponding HTML id ...

javascripthtmlcssjsonajax

Update header component dynamically upon successful login with Angular 11

I am currently using Angular 11 and facing an issue with displaying the username in the header component. The header loads before the login component, which results in the user data being stored in local storage only after the login component is loaded. As ...

javascriptangular

Adding default parameters in AngularJS Route-UI is a useful feature for setting up

Using angular UI-Router in my app, I've set up my base language as English. I have both English and Hebrew locals, and I want to avoid adding parameters to the URL if the language is English. For instance: Home English --> http://example.com/ ...

javascriptangularjsangular-ui-routerangular-ui