Top option for managing an excess of pins on Google Maps

Let me walk you through my Google Maps setup process:

  • To start, I retrieve the locations of all markers (usually under 300) from a database and send them to JavaScript in JSON format.
  • Within JavaScript, I parse the JSON data, iterate through the marker array, and create new google.maps.Markers. Each marker is equipped with an event listener that triggers an infobox (utilizing infoBox.js) containing a main picture and additional details. To manage the markers effectively, I utilize clustering via MarkerClusterer which has proven successful for hundreds of markers.

Now, my goal is to scale up and display around 10,000 markers using MarkerClusterer. What would be the most efficient approach to achieve this?

I was contemplating storing all marker data in a file, such as a JavaScript array or XML, and having JavaScript read from there instead of directly querying the database for 10,000 locations. However, I am open to other suggestions if you have any.

Should I continue looping through the array and placing one marker at a time? I briefly explored KML layers but realized they may not offer the functionality I need, especially regarding navigation between markers with features like prev/next location and potentially compatibility issues with infobox.js.

If you have any advice or recommendations on how to efficiently handle a large number of markers on Google Maps, please share!

javascriptgoogle-mapsgoogle-maps-api-3

Answer №1

Take a look at the documentation mentioned by @geocodezip, instead of opting for the Cluster solution consider exploring the Viewport Marker Management section.

If your database has geospatial query support, you can request to retrieve only markers within a specific bounds once the map is in an `idle` state.

google.maps.event.addListener(map, 'idle', function(){
    var bounds = map.getBounds(); //returns an object with the NorthEast and SouthWest LatLng points of the bounds

    //make an AJAX request passing in your `bounds`

    /*in the AJAX callback, remove the existing markers from the map and cluster object,
    then add the new ones along with their event handlers and re-add them to the cluster object as well*/

});

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

Content delivery networks (CDNs) are functioning properly, however, a script hosted locally on ASP.NET is

I've been encountering a problem accessing scripts in my ASP.NET (Web Forms) application. Even though the file is accessible through the server, it doesn't seem to load locally. <script type="text/javascript" src="fullcalendar.js"></scr ...

javascriptasp.netserverlocalcdn

Download a JSON file from an angularjs client device

I'm in the process of adding offline functionality to a Cordova app I'm developing. I have a PHP file that retrieves a list of images as JSON, which I then save on the client device using the FILESYSTEM API. However, when I try to display the ima ...

javascriptandroidjsonangularjscordova

Having an issue where my meshes disappear when using the Unreal Bloom render pass in ThreeJS. Any ideas on what might be causing

Just starting out with Three and I'm really enjoying it, but I seem to be stuck on a problem. The code in this gist might help: https://gist.github.com/TheeBryanWhite/a7a2041fc8848a0ba449897883c43bdc Initially, the first render functions correctly b ...

javascriptthree.js

Unable to send messages despite successful connection through Sockets.io

My Java Server is set up to listen for messages from an Ionic 2 Client using Sockets.io. The server can successfully send messages to the client, but I am facing issues with getting the client to send messages back to the server. For example, when the jav ...

javascriptjavasocketsangularionic2

I have come across this building error, what do you think is the cause of it?

My attempt to launch my company's React.js project, downloaded from Tortoise SVN, is encountering an issue. PS C:\Projects\Old EHR> yarn start yarn run v1.22.19 $ next start ready - started server on 0.0.0.0:3000, url: http://localhost:30 ...

javascripthtmlreactjsnext.js

Exploring the data-* attribute in jQuery

Currently, I have a form structured as follows: <div data-role="page" data-last-value="43" data-hidden="true" data-bind='attr : {"name":"John"}'></div> My objective is to modify the name attribute from "John" to "Johnny". I am att ...

javascriptjqueryhtml

The Raycaster intersections in Threejs are not updated in real-time when objects are added to the scene, but

Currently, I am in the process of developing a Minecraft-inspired game using Three.js. At the moment, my setup involves adding cubes to a scene along with a Raycaster that identifies if the pointer is hovering over any of the cubes. It then creates an ind ...

javascriptthree.jsraycasting

Angular-template static functions refer to functions that do not require an

Our project utilizes the linting-config provided by AirBnB. There is a rule that stipulates class methods must utilize this or be declared as static. While this rule theoretically makes sense, it seems to present challenges within an angular context. Consi ...

javascriptangulartypescript

Finding the second through eighth elements in a protractor using a CSS locator

Recently, I have been experimenting with protractor and facing a limitation when trying to reference elements. The only way to refer to them is through CSS, as they only have a class attribute provided. The issue arises when there are more than 7 elements ...

javascriptangularjsseleniumjasmineprotractor

Attempting to retrieve certain information, however encountering the error message "Cannot read property '0' of undefined at XMLHttpRequest.xhr.onreadystatechange"

Essentially, I am attempting to retrieve a specific set of data from an API showcasing only the names of the football home teams and then displaying them in a table format. However, despite being able to fetch the entire dataset from the API successfully, ...

javascripthtmlajaxxmlapi

How to retrieve an array from a JSON object with JavaScript

After receiving an object from the server, I am specifically looking to extract the array ITEMS. How can I achieve this? I attempted using array['items'] but it did not yield the expected result and returned undefined { "items": [ { ...

javascriptjson

What is the best way to target an element that does not exist yet?

I have a project for managing a todo list. When I click an "add" button, it creates a div element with another "add" button inside it. That part is easy. But now, I want to select that inner button so that I can use it to add a text input form inside the n ...

javascript

Utilize Axios in Vue.js to fetch and process data from a REST API endpoint in C#

After successfully creating and deploying an API on Azure, I am trying to display the response in an alert box using javascript (Vue.js). The test method of my API returns the string "working". You can test the API here. This is the code snippet from my A ...

javascriptc#visual-studiovue.jsaxios

What is the most effective method for structuring code to display or conceal HTML based on the root in AngularJS?

Currently, I am utilizing Angular to create a quiz. The root for Questions is /#/questions/1. With a total of 6 questions, I am displaying and hiding HTML for each question based on the root. Here is how my code appears: Template <section ng-class="{ ...

javascriptangularjs

Associate an alternate attribute that is not displayed in the HTML component

Imagine there is a collection of objects like - var options = [{ id: "1", name: "option1" }, { id: "2", name: "option2" } ]; The following code snippet is used to search through the list of options and assign the selected option to anot ...

javascriptangularjsangularangular-ngmodelangularjs-ng-model

Using Query strings in JavaScript: A Quick Guide

I recently completed a calculator project with only two pages. However, I am struggling to figure out how to pass input field values from one page to another. Despite trying multiple methods, nothing seems to be working. Does anyone know how to successful ...

javascriptphpjqueryhtml

Implementing AJAX notifications in a contact form integrated with PHP, Google reCAPTCHA, and SweetAlert

I've implemented an AJAX script to handle the submission of a basic contact form with Google reCAPTCHA at the end of my HTML. Here's the relevant HTML code: <div class="col-md-6"> <form role="form" id="form" action="form.php" method ...

javascriptphpjqueryhtmlforms

Beginner's guide to using Express: a step-by-step tutorial on making API requests from client-side JavaScript to

Currently, I am immersed in a Javascript project where I utilize the Nasa Mars Rover API and Immutable Js to creatively display images and information on my webpage. By harnessing the power of pure functions and functional programming, I maintain app state ...

javascriptnode.jsapiexpressfunctional-programming

Accept only hexadecimal color codes as user input

How can I create a variable in JavaScript that only accepts color codes such as rgba, hashcode, and rgb? I need a solution specifically in javascript. ...

javascriptstringcolors

Guide to changing the background color of material ui drawer component using styled-components

Issue with Styling Material Ui Drawer Using Styled Components In my application, I am utilizing a Material ui drawer in conjunction with Styled components. Although I have successfully styled several simple Material ui components using Styled components a ...

javascriptreactjsmaterial-uistyled-components