Conceal and Reveal every marker on the map

Question

Conceal and Reveal every marker on the map

Creating a map using angular to display data on the web page and Google Map is my current project.

This is my first major project utilizing Angular, and I have nearly achieved the functionality as planned. I am eager to enhance the site with more user-friendly features.

Click here to see the working code.

View the code on GitHub.

I have incorporated two buttons for hiding or showing all markers, but I am encountering errors such as clearMarkers, showMarkers, and allSetMap not being defined. When clicked, these buttons should be able to:

- Hide all markers except the one with the open info window - Show all markers I also intend to include code to remove the polyline and restore all markers to their original state upon clicking the "clear directions" button, selecting one of the options in the top image bar, or utilizing the hide/show markers buttons.

Any form of assistance or guidance you can offer would be greatly appreciated! Simple code, advice, or direction would be preferable as I am still a novice in this area. Forks are welcomed. I am keen to learn and code correctly. Your guidance will be immensely valued.

Here is the HTML code for the data and map:

Your rewritten content...

The controller code may seem messy, but it functions mostly well, excluding the mentioned issues. Here is the controller code:

Your rewritten content...

javascript angularjs dictionary google-maps-api-3 markers

Answer 1

Answer №1

One issue that may be causing errors in your code is the attempt to call the setAllMap() function as a global function when it only exists on the $scope object.

// The `map` argument is unused and redundant
$scope.setAllMap = function(map) {
    for (var i = 0; i < $scope.bars.length; i++){
          createMarker($scope.bars[i]);
    }  
}

// Calling setAllMap with map does nothing
$scope.setAllMap(map); 

$scope.clearMarkers = function(map) {
    // Since setAllMap only exists on $scope, trying to call it without referencing $scope will result in 'setAllMap is undefined'

    // To fix this, change it to $scope.setAllMap()

    // Additionally, passing null to setAllMap has no effect
    setAllMap(null);


}

Answer 2

One issue that may be causing errors in your code is the attempt to call the setAllMap() function as a global function when it only exists on the $scope object.

// The `map` argument is unused and redundant
$scope.setAllMap = function(map) {
    for (var i = 0; i < $scope.bars.length; i++){
          createMarker($scope.bars[i]);
    }  
}

// Calling setAllMap with map does nothing
$scope.setAllMap(map); 

$scope.clearMarkers = function(map) {
    // Since setAllMap only exists on $scope, trying to call it without referencing $scope will result in 'setAllMap is undefined'

    // To fix this, change it to $scope.setAllMap()

    // Additionally, passing null to setAllMap has no effect
    setAllMap(null);


}

Conceal and Reveal every marker on the map

Answer №1

Similar questions

Tips for adjusting the color of a <a> tag upon clicking, which remains unchanged until the URL is modified

How to utilize Vue.js method to retrieve child prop?

Sending data through ajax to PHP on separate pages is a common practice

The useRoutes function is returning null despite the correct pathname being provided

Update all Vue component imports to include the .vue extension at the end

How do I create individual tables for each JSON array within my object using React and MaterialUI?

Iterating through a series of AJAX requests in JavaScript until the variable equals "No" and then terminating the loop

Having trouble with managing state changes in a React application using Multiple Checkbox components from M

utilizing a pair of API requests within a personalized Alexa skill

Arrow functions in ECMAScript 6

Ways to recycle a section of Javascript for multiple uses on a single page

Triggering a JavaScript event with every update to the DOM marked as "completed"

What is the best way to split text copied from a textarea into <p> paragraphs with an equal number of characters in each?

Why would someone opt to utilize process.env.PORT in their code?

When a specific function is called, the DayPickerRangeController in the airbnb/react-dates library will update the

Implementing event handlers with 'v-on' on dynamically inserted content using 'v-html' in Vue

Maintaining data after page reload in Angular

The isotope plugin import failed, displaying the error message "The function $(container).isotope does not exist."

Top pick for building drag-and-drop web applications: the ultimate JavaScript library

Ajax request experiencing 500 Internal Server Error. Uncertain about the source of the issue