getting "google not defined" in apache cordova

Question

I'm trying to show a map in my APP but i'm getting "google not defined"

My index.js looks like this:

$(document).on('click', '#home_button', (function () {

        var coords = new google.maps.LatLng(-17.391919993615, -66.155978093418);
        var opciones = { center: coords, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP };
        var mapa = new google.maps.Map(document.getElementById("map"), opciones);
        var marcador = new google.maps.Marker({
            position: coords,
            map: mapa,
            animation: google.maps.Animation.DROP

        })


        getRefresh();
    }));

And my index.html header looks like:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <access origin="*" />
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">        
    <script src="../../Jquery/prettify.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDGGvPKPbRdqHqS98CK8BShmF7VLBHepcQ&sensor=false"></script>

After that I just show it in a<div id="map">

score 1 · Accepted Answer · edited May 23 '17 at 12:33

This applies to all platforms. This is happening because the Google API library hasn't been loaded yet and it's being called already. Load it asynchronously as suggested in this SO thread. Make sure the googleapis for maps is loaded first before using it:

<body>
    <div id="floating-panel">
        <input id="address" type="textbox" value="Sydney, NSW">
        <input id="submit" type="button" value="Geocode">
    </div>
    <div id="map"></div>
    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8,
            center: {lat: -34.397, lng: 150.644}
            });

            });
        }
    </script>
    //load it first using async
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8X7wnW7veRvTnS1xGzuxDaIGuQlHMn8I&callback=initMap">
    </script>
</body>

----another sample------

//load googleapis for maps first
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
//your js file that will use it
<script type ="text/javascript" src ="SomeJScriptfile.js"></script>

not

<script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

getting "google not defined" in apache cordova

1 Answers1