Google Map wont load in AJAX-loaded page.

[Anonymous]

I’m using google map API V3 and i have a container within an AJAX loaded page where the google map is loaded. I know that the map is functioning properly because i went to the exact PHP page and the map loads perfectly. But when the page is loads through the index page inside the AJAX div where the content is loaded into, the map doesn’t load. Heres the code i have so far.

HTML

<div class="content-page" id="contact-page" style="display:inline-block;">

    <div id="contact-form-and-details-container">
        <!-- contact form -->
        <div id="contact-form-container">
            <div class="pages-content-aligner">
                <p class="initial-letter" style="margin-top:0;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make </p>
                <form action="">
                    <input type="text" placeholder="Name"/>
                    <input type="text" placeholder="Email Address"/>
                    <textarea placeholder="Content" rows="10"></textarea>
                </form>
            </div>
        </div>


        <!-- more info -->
        <div id="more-info-container">
            <div class="pages-content-aligner">
            <!-- list table element -->
                <table class="list-table" style="width:100%;">
                    <tbody>
                        <tr>
                            <td class="table-icon-spot"><span class="font-icon fa-user"></span></td>
                            <td class="table-value-spot">John Doe</td>
                        </tr>
                        <tr>
                            <td class="table-icon-spot"><span class="font-icon fa-envelope"></span></td>
                            <td class="table-value-spot">[email protected]</td>
                        </tr>
                        <tr>
                            <td class="table-icon-spot"><span class="font-icon fa-phone"></span></td>
                            <td class="table-value-spot">1800-555-5555</td>
                        </tr>
                        <tr>
                            <td class="table-icon-spot"><span class="font-icon fa-map-marker"></span></td>
                            <td class="table-value-spot">1619 Broadway NY NY 10019</td>
                        </tr>
                        <tr>
                            <td class="table-icon-spot"><span class="font-icon fa-link"></span></td>
                            <td class="table-value-spot"><a href="#" target="_blank">http://Google.com</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>





    <div id="map-container">
        <div id="map" style="width:100%; height:400px"></div>
    </div>

</div>


<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtt9k645_qQjnVSsjCnWvxN87YOeYhODM&sensor=false"></script>
<script type="text/javascript" src="../js/google-map-api.js"></script>

GOOGLE MAP API JS FILE WHICH IS LINKED IN THE CONTACT PAGE FILE AT THE BOTTOM

// When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);

        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
            var mapOptions = {
                    // How zoomed in you want the map to start at (always required)
                    zoom: 11,

                    // The latitude and longitude to center the map (always required)
                    center: new google.maps.LatLng(40.6700, -73.9400), // New York

                    // How you would like to style the map. 
                    // This is where you would paste any style found on Snazzy Maps.
                    styles: [   {       featureType:'water',        stylers:[{color:'#46bcec'},{visibility:'on'}]   },{     featureType:'landscape',        stylers:[{color:'#f2f2f2'}] },{     featureType:'road',     stylers:[{saturation:-100},{lightness:45}]  },{     featureType:'road.highway',     stylers:[{visibility:'simplified'}] },{     featureType:'road.arterial',        elementType:'labels.icon',      stylers:[{visibility:'off'}]    },{     featureType:'administrative',       elementType:'labels.text.fill',     stylers:[{color:'#444444'}] },{     featureType:'transit',      stylers:[{visibility:'off'}]    },{     featureType:'poi',      stylers:[{visibility:'off'}]    }]
                };

                // Get the HTML DOM element that will contain your map 
                // We are using a div with id="map" seen below in the <body>
                var mapElement = document.getElementById('map');

                // Create the Google Map using out element and options defined above
                var map = new google.maps.Map(mapElement, mapOptions);
            }

[Anonymous]

I tried adding $(document).ready but that didnt work

[CrocoDillon]

You probably need asynchronous loading – https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

This part callback=initialize tells the script to call the initialize (or whatever name you choose) function (which you need to create globally accessible) when it’s loaded.

[Anonymous]

it already has the initialize function as “init()” in the js i posted. So do i call the function on document load?

[CrocoDillon]

I guess you can use that as callback. callback=init in the url query.

[Anonymous]

I’m getting this error in the console

Uncaught ReferenceError: google is not defined

What exactly does that mean?

[CrocoDillon]

You can only reference to google from inside the init function, so you probably just need to remove:

google.maps.event.addDomListener(window, 'load', init);

[Anonymous]

That fixed the error but the map still isn’t loading. I dont fully understand what you mean by
“I guess you can use that as callback. callback=init in the url query.”

[CrocoDillon]

Try exactly what is on this page, and go from there:

https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

In your case, since you named your initialize function init, you could have used this url instead though: 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
'callback=init'

[lovethisink]

Did this solution end up working for you? I’ve been having the same issue myself, and I’ve tried this and various other solutions with no luck still. Site is here: ruiz-knott.com/travelinformation

[Author]

Posts