Where do I put this line of JS for my Google map?

Question

I'm using the following code to create an embedded Google map on my webpage:

function init() {
    var mapOptions = {                                 // Set up the map options
        center: new google.maps.LatLng(40.782710,-73.965310),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 13
    };
    var venueMap;                                      // Map() draws a map
    venueMap = new google.maps.Map(document.getElementById('map'), mapOptions);
}

function loadScript() {
    var script = document.createElement('script');     // Create <script> element
    script.src = 'http://maps.googleapis.com/maps/api/js?sensor=false&callback=init';
    document.body.appendChild(script);                 // Add element to page
}

window.onload = loadScript;                          // on load call loadScript()

It works well, except it creates the same error described here. A simple suggested solution was to add the following line:

google.maps.event.trigger(map, 'resize');

One user suggests putting it in the console and when I do that, it works great. Even if I manually readjust the size of the window, it resets perfectly. I tried to insert the code right after the line that adds the element to the page and I get an error from Firefox that says ReferenceError: google is not defined and points to the line I inserted.

Where should I be putting this code?

EDIT: Here's the code that recreates the problem:

 $(function() { $("article").hide().delay(1000).fadeIn(1000); loadScript(); google.maps.event.listener(map, 'resize'); }); function init() { var mapOptions = { center: new google.maps.LatLng(40.782710, -73.965310), mapTypeId: google.maps.MapTypeId.ROADMAP, zoom: 13 }; var venueMap; venueMap = new google.maps.Map(document.getElementById('map'), mapOptions); google.maps.event.trigger(map, 'resize'); //google.maps.event.trigger(map, 'resize'); } function loadScript() { var script = document.createElement('script'); script.src = 'http://maps.googleapis.com/maps/api/js?sensor=false&callback=init'; document.body.appendChild(script); } 

 #map { width: 400px; height: 400px; margin-left: auto; margin-right: auto; } article { width: 80%; padding-top: 30px; padding-bottom: 30px; margin-left: auto; margin-right: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div id="map"></div> <script src="js/google-map.js"></script> </article> 

Answer 1

一旦您的fadeIn完成并且id =“ map”的div具有google.maps.event.trigger(map, 'resize');触发调整大小事件（ google.maps.event.trigger(map, 'resize'); ）。