CODEWITHSUNDEEP
javascriptjquery
WadeB
WadeB

Reputation: 89

Google maps Reference error: google not defined - jQuery Mobile

I am trying to create a simple application that contains a map with a bunch of school campus locations on it and I am having a problem getting the map to load. The loading animation is on an endless loop.

I get this error in the console "Reference error: google is not defined" Any thoughts on this issue? This code is just copy and pasted from jQuery website.

Here is my script that inside my html document

<script>
        /*
         * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
         * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
         */
         $( document ).on( "pageinit", "#map-page", function() {
            var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support
            if ( navigator.geolocation ) {
                function success(pos) {
                    // Location found, show map with these coordinates
                    drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                }
                function fail(error) {
                    drawMap(defaultLatLng);  // Failed to find location, show default map
                }
                // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
                navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
            } else {
                drawMap(defaultLatLng);  // No geolocation support, show default map
            }
            function drawMap(latlng) {
                var myOptions = {
                    zoom: 10,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
                // Add an overlay to the map of current lat/lng
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "Greetings!"
                });
            }
        });
        </script>

Here is the entire HTML doc for reference

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <!-- <link rel="stylesheet" href="styles.css" /> -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    </head>

<body>
    <header>
          <div class="ui-body ui-body-a ui-corner-all">
                <h3>BCIT Campuses</h3>
                      <p>This app is designed to show you the various BCIT Campus locations</p>
                  </div>
            </header>
    <form>
        <div class="ui-field-contain">
            <label for="select-native-1">Basic:</label>
            <select name="select-native-1" id="select-native-1">
                <option value="1">The 1st Option</option>
                <option value="2">The 2nd Option</option>
                <option value="3">The 3rd Option</option>
                <option value="4">The 4th Option</option>
            </select>
        </div>
        </form>
        <div data-role="page" id="map-page" data-url="map-page">
                <div data-role="header" data-theme="a">
                <h1>Maps</h1>
                </div>
                <div role="main" class="ui-content" id="map-canvas">
                    <!-- map loads here... -->
                </div>
            </div>

        <footer>
                 <div class="ui-body ui-body-a ui-corner-all">
                        <h4>Wade Barrie</h4>
                          </div>
        </footer>
</body>
<script>
        /*
         * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
         * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
         */
         $( document ).on( "pageinit", "#map-page", function() {
            var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support
            if ( navigator.geolocation ) {
                function success(pos) {
                    // Location found, show map with these coordinates
                    drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                }
                function fail(error) {
                    drawMap(defaultLatLng);  // Failed to find location, show default map
                }
                // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
                navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
            } else {
                drawMap(defaultLatLng);  // No geolocation support, show default map
            }
            function drawMap(latlng) {
                var myOptions = {
                    zoom: 10,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
                // Add an overlay to the map of current lat/lng
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "Greetings!"
                });
            }
        });
        </script>
</html>

Upvotes: 0

Views: 143

Answers (1)

robinsax
robinsax

Reputation: 1220

You're not including the Google maps script, so it never gets a chance to provide you the google object.

Add 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"</script>

to the head of your document, and don't forget to add your API key!

Upvotes: 1

Related Questions