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

Changing image with object literal inside of an array.

I have a large array of Google Map locations..

var locations = [
        ["Blair County, PA", 40.453132, -78.384223, 1"],        
        ["Scranton, PA", 41.408969, -75.662412, 2"]
];

Below that I have some more code...

var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: new google.maps.LatLng(39.488560, -78.065193)
    }); 

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for(i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            icon: 'images/pin-waves.png',
            animation: google.maps.Animation.DROP,
            map: map    
        });

inside of the marker for loop, I have an icon object literal. What I want to do is assign this icon to the array locations[I][4].

However, I have 3 total icons that I need to assign.

I thought I could do this...

    for(i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        if (locations[i][4] === 1) {
            icon: 'images/pin-waves.png',
                        } else if (locations[i][4] === 2) {
            icon: 'images/pin-rain.png',
                        }
            animation: google.maps.Animation.DROP,
            map: map    
        });

Notice the if/else statement trying to change the icon image according to the number of the arrays index. This doesn't work obviously. How can I get this to work?

1 Answer

james south
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points
james south
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points

since the subarrays in locations all have length 4, there is no locations[i][4]. the icon number would be index 3. you also have errant quotes " that are creating strings you don't want. notice the different colors in the formatted locations array you posted.