CODEWITHSUNDEEP
javascripttwitter-bootstrapgoogle-maps
Hoopla70
Hoopla70

Reputation: 111

Google Maps API not initializing when paired with Bootstrap

Let me begin by saying I am not a web developer. I am typically coding in Java, C# or C++, so I apologize in advance I am asking a question with an obvious answer. I've tried multiple solutions from here but not have worked yet.

The situation is that I have a bootstrap based website with an 8 and 4 column layout. I have my google map saved in the same directory as the web page creatively named "GoogleMap.js". On a separate demo page, not associated with Bootstrap, the code runs perfectly fine. But to the best of debugging abilities, it will not initialize when paired with bootstrap. I came to this conclusion by using document.write() statements to test what javascript elements were loading. I have tried both <script src="GoogleMap.js"> and imbedding the code simply inside a <script> tag. Neither seem to work.

Below is the relevant code I have managed to pull together from here. If I need to add any addition information I can. Thank you all very much in advance.

GoogleMap.js :

$(document).ready(function() {

var ZOOM_LEVEL = 8; // The initial zoom level of the google map
var MAP; // The map object used for interactions with the user

    // The initalize function runs as soon as the page loads
    function initialize() {

        document.write("Map was initialized");

        // Set the properties for our map
        var mapProp = {
            center: {lat: 36.4177257, lng: -83.2245912}, // This is where the map will focus
            zoom: ZOOM_LEVEL, // This is the starting zoom level
            mapTypeId:google.maps.MapTypeId.ROADMAP // This is the map view type
        };

        // Create the map object
        MAP = new google.maps.Map(document.getElementById("GoogleMap"),mapProp);
    }
// Listen for the browser to call for the initialization of the map
google.maps.event.addDomListener(window, 'load', initialize);
});

`

map-page.php :

<!DOCTYPE html>
<html>
<head>
<!-- Connect to the bootstrap cdn -->
<link rel="stylesheet" type="text/css" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Connect to the google maps API -->
<script src="http://maps.googleapis.com/maps/api/js"></script>

<!-- Connect to our google map JavaScript file -->
<!-- Not sure which to use here, so I have both in this example.  -->
<!-- But while testing, I only use one or the other. Again, I am a very  -->
<!-- in-experienced web developer -->
<script src="./GoogleMap.js"></script>
<script src="GoogleMap.js"></script>

<!-- Connect to jquery -- This is needed for bootstrap to work -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- Connect to bootstrap javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
<div class="row">
        <!-- Main Content Area -->
        <div class="col-lg-8 col-md-8 col-sm-12 col-ex-12">
            <!-- Display the map -->
            <div id="GoogleMap" style="width:500px;height:380px;"></div>
        </div> <!-- Ends Main Content Area -->

        <!-- Side Bar -->
        <div class="col-lg-4 col-md-4 col-sm-12 col-ex-12">
            <!-- Stuff and things -->
        </div> <!-- Ends Side Bar -->

</div> <!-- Ends Row -->
</div> <!-- Ends Container -->
</body>
</html>

Upvotes: 0

Views: 549

Answers (1)

warDevyll
warDevyll

Reputation: 47

You should place your code

<script src="GoogleMap.js"></script>

at the bottom of the page before the closing body tag.

Here's an example:

    </div> <!-- Ends Container -->

    <script src="GoogleMap.js"></script>

</body>

The reason why your Google Map is not getting initialized is because you called a jQuery function inside your GoogleMap.js: $(document).ready() BEFORE jQuery itself gets initialized.

Upvotes: 1

Related Questions