"React Basics (2018)" was retired on March 31, 2024. You are now viewing the recommended replacement.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Nick Wilson
Nick Wilson
5,060 Points

calling an object literal

I have a google map with 3 checkboxes that are default already checked. Each marker is set up like this: 

var marker13 = new google.maps.Marker({
        position: lynchburgVA,
        map: map,
        title: 'Lynchburg, VA',
        animation: google.maps.Animation.DROP,
        icon: 'images/pin-cloud.png',
        category: "cloud"
    });

I have 13 total pins and each object literal "category" has a ... category name being "cloud, rain, or river"

Can I hide the pins by their category names? Or do I have to hide the pins according to their variable names? I tried this...

    $(".check1").on("click", function(){
        cloud.hide();
    });

Obviously it can't find variable "cloud." Because it's not a variable it's an object literal. How do I select it by it's category so that I can hide all the pins within that category when the checkbox is unchecked?

1 Answer

Steven Parker
Steven Parker
243,331 Points
Steven Parker
Steven Parker
243,331 Points

It's not a variable you would "hide" anyway.

Have you established some connection between the category and the HTML elements that you would want to hide? I see that the marker13 object has that category, but what HTML element is associated with marker13?

Nick Wilson
Nick Wilson
5,060 Points

It wouldn't have an associated html because it's mainly javascript? It is a new pin location on a google map api. The marker13 is associated with variable lynchburgVA that has a longitude and latitude on the map. What I want to do is group the pins to hide them all at once in a checkbox according to their category names. In this case the category is "cloud" . Maybe my javascript isn't right? But everything works. I don't have the entirety of the code with me since i'm not at work anymore...

Should I set up a function holding all of the variables that are associated with "cloud" and hide them on click of the checkbox? I'm thinking my code is not DRY.

basically we have 13 pins on a google map. Each pin has an image icon, cloud, rain, or water. Which in turn are the pin categories that I want to hide. On click, hide all cloud pins...etc...

I thought that I could set up a object literal named "cloud" for each pin that had the cloud image. and "rain" for each pin that had the rain image. And based on that category, select it and hide those pins. Maybe i'm going out it all wrong.

Steven Parker
Steven Parker
243,331 Points
Steven Parker
Steven Parker
243,331 Points

You didn't provide a link to the course so this might be a course I've not taken. Is hide a method of a Maker object? I was thinking it was the method of jQuery objects that represent HTML elements.

Is there a collection you could iterate through and apply the method to those with the proper category value?