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 Tristan Swire
Tristan Swire
15,479 Points

Google Maps API with jQuery each

Hey Everyone!

I am working on a piece of code and can't seem to figure out where I'm going wrong. I'm trying to integrate a map for each unique item so that the user will know where the restaurant is located. Here's an error I'm receiving:

Uncaught TypeError: Cannot read property 'defaultView' of undefined

Any help would be great appreciated! Here's the code:

function getJSON() {
    var url = '../restaurants.json';
    $.getJSON(url, function (response) {

        var list = '<ul class="container-list two-list">';
        var num = 0;
        var lat = '';
        var lng = '';
        var map;
        var myOptions;

        $.each(response.restaurants, function (index, value) {
            /* info variables */
            var name = value.name;
            var image = value.backgroundImageURL;
            var category = value.category;
            lat = value.location.lat;
            lng = value.location.lng;

            var id = 'google-map-' + num;

            var userLocation = {lat: lat, lng: lng};
            map = new google.maps.Map($(id), {
                zoom: 4,
                center: userLocation
            });
            marker = new google.maps.Marker({
                position: userLocation,
                map: map
            });

            list +=
            '<li class="item">' +
                '<div class="item-image">' +
                    '<img src="' + image + '"alt="restaurant image"></img>' +
                    '<img src="/_images/cellGradientBackground@2x.png" alt="background gradient" class="gradient"  />' +
                    '<div class="item-text">' +
                        '<h2 class="name">' + name + '</h2>' +
                        '<p>' + category + '</p>' +
                    '</div>' +
                    '<a href="#" class="show-more-trigger">Show More</a>' +
                '</div>' +
                '<p class="show-more">This will be the show more paragraph.This will be the show more paragraph.This will be the show more paragraph.This will be the show more paragraph.This will be the show more paragraph.This will be the show more paragraph.</p>' +
                '<div id="google-map-' + num++ + '" class="google-map"></div>' ;

        }); // end EACH

        list += '</ul>';

        $('.container-list.json').html(list);

    }); // end getJSON
}

Thanks!

3 Answers

Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points
Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points

I've never used the Google Maps API, so bear with me if I'm completely off.

The only two things that puzzle me are:

  1. I can't find a closing li tag in list
  2. This section is weird to me: 
var id = 'google-map-' + num; //should this be '#google-map-' +num instead? (see below)

var userLocation = {lat: lat, lng: lng};
map = new google.maps.Map($(id), { // $(id) isn't selecting any DOM (div) element, which it appears is required
   zoom: 4,
   center: userLocation
});

Also, it could cause a problem (once selected) that you're asking to select the first div element before it has been dynamically created.

Tristan Swire
Tristan Swire
15,479 Points
Tristan Swire
Tristan Swire
15,479 Points

I've made the adjustments to your first two observations but I think the last problem you listed is the issue.

Would I need to run the first bit of code on window on load and then create another function containing the google maps selector under document ready so that it runs after?

Sorry if that sounds confusing - still getting the hang of grabbing data from a JSON file and rendering HTML via JS :)

Marina Alenskaja
Marina Alenskaja
9,320 Points
Marina Alenskaja
Marina Alenskaja
9,320 Points

Hi Tristan

Don't know if this will help, but I use this code for my own app when initializing the map - and remember that you should actually have an element with an id "map" in your html, in order for it to work.

var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: latlng
            });