Is it more effective to store data in markers or in JSON when using the Google Maps JS API?

I have been working on visualizing government data through the Google Maps JS API. Currently, every time a user changes a filter value, the whole JSON dataset is fetched again, filtered, and new markers are generated for each valid row. This process seems slow as it downloads the JSON repeatedly whenever there is a change in the filter settings.

There are two possible ways to optimize data caching and dynamic display: either store the downloaded JSON once and manage markers based on filters or create all markers upfront and show only those that match the filters.

I am unsure about the performance impact of these two approaches. Both strategies make sense to me, but I need help evaluating which one would be more efficient. How can I determine the load imposed by displaying google maps markers on the user's system?

javascriptjsongoogle-mapsgoogle-maps-api-3

Answer №1

The two suggested approaches are bound to be more efficient than the original strategy, where the JSON data is fetched again with each filter change.

Every method has its pros and cons.

If you opt not to fetch the JSON data with every filter change, there's a chance that the data could become outdated. However, if the JSON data is rarely updated, this concern may be irrelevant.

Caching the JSON data and creating all markers upfront might cause a slight delay in loading the map initially, as you would need to create all markers first. On the other hand, by only creating a subset of markers, the map can load quicker.

The key factors to consider are the number of markers and the typical usage pattern of the map.

If there are one million markers and changing filters results in 100,000 markers being regenerated, it might be better to generate all markers at the beginning and adjust their visibility as needed.

Likewise, if there are one million markers and changing filters only reveals one or two markers out of the entire set, destroying and recreating them might be faster.

As a user, I personally wouldn't mind if the map took slightly longer to load initially, even if it meant sacrificing 1-2 seconds. The instant response when playing with the filters is more important to me. Hope this explanation helps.

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

IE9 Error: Uploads with Fine Uploader are unsuccessful

I'm encountering a strange issue with fine uploader (version 3.0). It functions properly on all browsers except for Internet Explorer 9. There are no JavaScript errors, but it fails to upload and results in a 0-byte file. I'm using the valums PH ...

javascriptjqueryfile-uploadinternet-explorer-9fine-uploader

Is the `crypto.randomInt()` function known for its cryptographic security strengths?

Trying to find the best method for generating secure random numbers in Node.js. One option I've come across and currently using is crypto.randomInt(). Wondering if this method is truly cryptographically secure or if there are more reliable alternative ...

javascriptnode.jsrandomcryptography

Discover how to determine the direction of a div element when utilizing the dir="auto" attribute in HTML5 with JavaScript

I'm experiencing an issue with a div that has the dir attribute set to auto. My goal is to retrieve the rendered direction using javascript After attempting div.dir, I only receive the 'auto' value. Is there a method available to detect if ...

javascripthtml

The values returned by querying the browser console and using Selenium are not consistent

I'm working on an HTML page that includes a text box: https://i.sstatic.net/rOG4X.png <h2>Step 2:</h2> <p>Enter the URL for the language here: <input type="text" size="80" name="url"></p> W ...

javascripthtmlselenium-webdriver

Incorporate symbols and unique characters in your dataset

When retrieving records from the database, I noticed that some of them contain apostrophes. For example, one record has a name like this: CC CHÂTEAU D'IF However, when looking at the element, the data-attribute appears to be incorrect: data-vess ...

phpjqueryjsonajax

Is there a way to make the text appear on top of the overlay within this bootstrap carousel?

Currently, I am working on a project and I am interested in using a full-screen carousel. I came across this carousel snippet: . I am using the latest Bootstrap 3 version (3.3.7), but the snippet was originally built for version 3.2.0. If you try changing ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issues arise when trying to assign a value using React hooks

Recently, I have been exploring hooks and faced an issue while working with them. Within my application, I have two components: const Button = ({ isHidden, icon, onClick }) => { return ( <div> {isHidden ? ( <button classN ...

javascriptreactjsreact-hooks

Alan AI does not support installation on React Native

❯ To install the @alan-ai/alan-sdk-react-native package, run: sudo npm i @alan-ai/alan-sdk-react-native --save > Post installation for @alan-ai/contact: > Copying AlanSDK.js, AlanButton.js, and AlanText.js to destination Mak ...

javascriptreact-nativenpm

Utilize JSON to modify the database

I have successfully implemented a code to edit records in a database, but now I am looking to enhance its functionality by adding the ability to include functions for adding or deleting records as well. Currently, my form has three separate buttons for Ad ...

javascriptjsonedit

Verify the presence and delete a table row from the JSON data that is returned

Is there a way to verify the presence of a label in the JSON response and exclude it from the displayed row in my table? In the code snippet below, you can observe that I am returning 'Page Name not defined'. I want to hide this label and any re ...

javascriptjqueryjsonif-statement

incorporate a new component in real-time

I need help with dynamically adding components to my container in AngularJS. I have a componentA that functions as a container, and I want to add multiple instances of componentB when a button is pressed. Currently, I can successfully add a single instanc ...

javascripthtmlangularjs

In Reactjs, a child component is unable to activate a function that is owned by the parent

I'm working with a modal parent component and a form child component. The challenge I'm facing is that the function to open and close the modal is in the parent component, while the submit function is in the child component. What I need is for th ...

javascriptreactjsformsparentchildren

Challenges regarding OAuth2 and the angular-auth2-oidc Library - Utilizing PKCE Code Flow

As a newcomer to OAuth2 and the angular-auth2-oidc library, I may make some beginner mistakes, so please bear with me. MY GOAL: I aim to have a user click on the login link on the home page, be directed to the provider's site to log in, and then retu ...

javascriptangularoauth-2.0angular-oauth2-oidc

Struggling to properly parse JSON data using jQuery

I am a beginner in jquery and have a php script that returns JSON data. However, I am facing an issue while trying to fetch and process the result using jquery. Below is the code snippet: calculate: function(me, answer, res_id, soulmates) { conso ...

javascriptjqueryjson

Refreshing data causes the data to accumulate and duplicate using the .append function in Jquery

I am currently working with a dynamic table that is being populated using AJAX and jQuery. Everything seems to be functioning correctly, however, I am encountering an issue when trying to reload the data as it just continues to stack up. Below is the func ...

javascriptjqueryhtmlajax

Struggling with a stuck Bootstrap Navbar during responsive mode?

I recently designed a website using a bootstrap theme and incorporated a navbar into it. However, I noticed that the navbar collapses in responsive mode, but stays fixed to the right side of the page. This is causing me to horizontally scroll in order to ...

javascriptjqueryhtmlcsstwitter-bootstrap

A multi-threaded JSON parser that avoids the Android run method

I am relatively new to programming and currently working on a JSON parser. However, I am facing an issue where my thread method is inaccessible. When I debug the code, it enters the getJSON method but skips the run method. I have tried searching on platf ...

javaandroidjsonthreadpool

When clicking on ASP.NET sidebar styles, they continuously refresh

This is the code snippet I have in the sidebar: <div class="sidebar w3-collapse" id="showside"> <div class="sidebarbg"> <center> <img id="image" class="w3-round w3-margin-rig ...

javascripthtmlcssasp.net

What could be causing my Wikipedia opensearch AJAX request to not return successfully?

I've been attempting various methods to no avail when trying to execute the success block. The ajax request keeps returning an error despite having the correct URL. My current error message reads "undefined". Any suggestions on alternative approaches ...

javascriptjqueryajaxwikipediawikipedia-api

How can I preserve the file extension of an ejs file as .html?

I'm in the process of building an expressjs application using the ejs template engine. However, I'd like to retain the file extension as .html instead of using .ejs. The main reason for this is that I am using Visual Studio for my development wor ...

javascriptnode.jsexpressejsembedded-javascript