Display and initialize multiple Google Maps dynamically

Question

I am developing a single page application which at one point displays a list of results of which each result holds a location which is supposed to be displayed in a separate google maps element. (So I potentially got lots of map elements).

To prevent unnessessary dataload the maps should only load once they are clicked. Since none of my maps are present in the DOM on pageload (I generate them using jQuery), I can't initialize them using a callback function passed as a parameter while loading the google maps javascript api. So here is a part of the loop used to create the resultlist. "container" is the div container which holds the map, while "mapCon" is the div which will actually be the google map element.

expandContainer.click(function () {
            var mapCon = $(container.find(".googleMap")[0]);

            function myMap() {
                var mapProp = {
                    center: new google.maps.LatLng(51.508742,-0.120850),
                    zoom:5
                };
                new google.maps.Map(mapCon,mapProp);
            }

            myMap();
        });

I am loading the google maps javascript api using the following code (found on stackoverflow):

$(document).ready(function () {
function lazyLoadGoogleMaps() {
    $.getScript("https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=googleMapsLoaded")
        .done(function (script, textStatus) {
            alert("Google maps loaded successfully");
        })
        .fail(function (jqxhr, settings, ex) {
            alert("Could not load Google Maps: ", ex);
        });
    }
});


function googleMapsLoaded() {
    alert("Done!");
}

I get the "Done"-alert way before any of the results are generated. Nevertheless, I get the following error message when clicking on the maps:

Uncaught TypeError: Cannot read property 'defaultView' of undefined
at new _.Fw (common.js:174)
at Object.uz.f (map.js:57)
at Array.<anonymous> (js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:91)
at js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:108
at Object.<anonymous> (js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:52)
at js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:108
at js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:52
at js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:108
at Pc (js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:54)
at Oc.pa (js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:108)

At this point I have no idea how to fix this and am kinda desperate to find a solution since it is not an option to "outsource" the maps (single page application).

js?key=MY_KEY& In this line i expect you are sending the real key rather than this placeholder? — muasif80
– muasif80, Commented Sep 7, 2017 at 22:05

Zitruism · Accepted Answer · 2017-09-07 22:05:32Z

1

Wow, so I found the solution right after I posted this question ... :-)

instead of

var mapCon = $(container.find(".googleMap")[0]);

it is supposed to be

var mapCon = container.find(".googleMap")[0];

since

new google.maps.Map(mapCon,mapProp);

won't take a jQuery-Element as parameter.

answered Sep 7, 2017 at 22:05

Zitruism

1211 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display and initialize multiple Google Maps dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related