Modify the Google Store Locator library to only display markers once a search has been initiated

In order to meet my client's request for a unique map feature on his web store, I am striving to achieve a display similar to the Google Store Locator library. The challenge lies in making the map not show any markers until a location search is initiated, at which point only 3 nearby stores should appear on the map. Subsequent searches should refresh the map with only these 3 closest stores displayed.

My attempts to modify the configuration and JavaScript files have been unsuccessful so far. While I managed to manipulate the list of stores using the provided code snippet:

first_time = false;
...
...
if(!first_time){
  items_per_panel = 0;
  first_time = true;
}else{
    items_per_panel = 1;
} // if

I have hit a roadblock when it comes to hiding the markers. It seems that customizing the code responsible for displaying markers like this:

 marker.setMap(this.getMap());

might be the solution, but I am unsure of how to proceed.

Answer №1

After incorporating the item properties and utilizing item.getId() to retrieve the list, I organized the first elements by proximity. In the pin-drawing method, I referenced this stored array as stores_list:

  for (var j = 0; j < items_per_panel && j < stores.length; j++) {
  // Access store information

  var storeInfo = stores[j].getInfoPanelItem();

  stores_list.push(stores[j].getId()); // modification

 ....

 if(jQuery.inArray(store.getId(), stores_list) != -1 ) marker.setMap(this.getMap());  // condition added

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

Tips for Saving JSON Response from Fetch API into a JavaScript Object

I am facing an issue trying to store a Fetch API JSON as a JavaScript object in order to use it elsewhere. The console.log test is successful, however I am unable to access the data. The Following Works: It displays console entries with three to-do items: ...

Verifying the visibility status of a div and toggling a class based on it

I'm facing a challenge with multiple checkboxes in a row. When a button is clicked, it displays a div (#locale_container), and flips a small arrow by adding a rotated class. However, I only want the arrow to flip when the div is being shown or hidden ...

Transform a String into an Array object

There is a string that resembles the following pattern: var stringArray = "[[1,2,3,4],[5,6,7,8]]" The objective is to use Javascript to convert it to the following format: var actualArray = [[1,2,3,4],[5,6,7,8]] What would be the method to accomplish ...

Utilizing jQuery to load form(s), submit data via POST method, and fetch results without refreshing the

After conducting thorough research, I have been unsuccessful in implementing any of the solutions I have come across. It seems like I am close to a solution, but there may be something crucial that I am missing... A question similar to mine was asked on t ...

Combining query results/objects by id in an array within a React application with Firebase Firestore

After retrieving chat messages from a Firestore snapshot, I have the following query result involving conversations among three individuals: {timestamp: "October 25th 2020, 11:13:59 am", name: "John Doe", email: "<a href="/cdn ...

Uh oh: encountered an unexpected token 'export' in node_modulesexpoAppEntry.js

I'm encountering a challenge with my Expo project. While attempting to launch my app using yarn start, I'm running into this error: Android Bundling failed 449ms error: node_modules\expo\AppEntry.js: Unexpected token 'export&apo ...

Automate logging in and out of Gmail chat by programmatically simulating clicks on the span elements that represent the chat status in Gmail

When I'm at work, I prefer using Gmail's encrypted chat feature because it logs chats without saving anything to the hard drive. However, when I'm at home, I switch to Pidgin as logging into Gmail chat at home can lead to messages ending up ...

The error message "TypeError XXX is not a function in NodeJS" indicates that

As I attempt to enhance the testability of my NodeJS API by incorporating a service, a peculiar issue arises. Specifically, upon injecting the service (class), an error is triggered stating that the method getTasks() does not exist. ROUTE const TodoServi ...

When a dropdown replaces the value of another

I'm currently working on a page using JavaScript, React, and Formik. I have encountered an issue with two dropdowns within one form - when I select a value in one dropdown, the value in the other resets. To illustrate this problem, I have included a g ...

What sets apart a .json file from a .js file when incorporating them into three.js coding?

When working with three.js, both .json and .js files are utilized as object formats. What sets them apart from each other? Do they necessitate different loaders for loading the objects? I came across this three.js demonstration: . In the example, a .js fi ...

Running JavaScript code after an f:ajax response in JSF

Within my JSF 2 web application, I have implemented the following code snippet to manage and update the contents of a rich:dataTable based on the selectedStatus: <h:selectOneRadio id="statusSelection" value="#{backingBean.selectedStatus}" style="width: ...

Set a click listener on a button within Ext.window.MessageBox

Currently, I am dynamically generating a message box using Ext.window.MessageBox. var msgBox = Ext.create('Ext.window.MessageBox', { title: '', //message in window msg: 'message text', icon: ' ...

Tips for establishing conditional guidelines and mandatory fields within Vue?

Struggling to implement conditional required fields on a form. The approach I've taken is by setting a data field notRequired: false, and then using it in the fields like this: :required="!notRequired". This allows me to make certain fields not requir ...

What is the best way to retrieve information from a json file using axios in a React project?

I'm having trouble retrieving JSON data. { ID string `json:"id"` Amount int `json:"amount"` Month string `json:"month"` PayFailed bool `json:"pay_failed"` } I’ve written the foll ...

incorporating customer functions into telerik drop down menu renders it immobile

I have been encountering an issue with adding client events to a Telerik dropdown list. Whenever I try to add these client events, the dropdown list becomes static. In other words, it ceases to function as a dropdown list - it no longer responds when click ...

Facing an infinite loop issue with my ng-view and the index.html page in AngularJS

Hello everyone, I have a question regarding AngularJS ngview. I just started learning about Angular a week ago. In my code, the webpage is showing an infinite loop of the index itself instead of displaying the correct page. I've searched on Stack Ove ...

Exploring HTML5 video playback in AngularJS

When I use this code: <video id="video" class="video-js vjs-default-skin" controls width="640" height="264"> <source src="http://localhost:3000/files/public/photos/Let-her-go.mp4" type='video/mp4' /> <p class="v ...

Employing the power of Bluebird's Promisifyall functionality in conjunction with M

I've implemented mongoose with Bluebird's promisifyAll like this: var mongoose = require('bluebird').promisifyAll(require('mongoose')) Now, I'm trying to fetch a document from MongoDB using the "where" clause in the fo ...

Displaying identical data from a single component across multiple components using Angular 4

I am currently displaying one HTML code across various components. However, when switching from one component to another in the browser, the data displayed from the shared component also changes. How can I ensure that the values remain consistent? My goal ...

It appears that using "object[prop]" as a name attribute does not function properly in HTML

After using console.log on the req.body I received this output: [Object: null prototype] { 'shoe[name]': 'Shoe Name', 'shoe[description]': '', 'shoe[pictures]': '', 'shoe[collections] ...