Multi-Device Hybrid Apps - Google Map

I want integrate a google map inside Multi-Device Hybrid Apps, I am following the example:

Loading Google Maps in Cordova the Right Way

this works, but the ripper emulator doesn't show me the map.

The Visual Studio has a "DOM explorer" tab and I can see others div inside the div with id=”map”, I think the map is inside.

The html and and .js code:

(function (global) {
    "use strict";

    //document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );
        
        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        loadMapsApi();
    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
        loadMapsApi();
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
        loadMapsApi();
    };

    function loadMapsApi() {
        //if (navigator.connection.type === Connection.NONE || google.maps) {
        if (navigator.connection.type === Connection.NONE) {
            return;
        }
        $.getScript('http://maps.googleapis.com/maps/api/js?key=XX&sensor=true&callback=onMapsApiLoaded');
    }


    global.onMapsApiLoaded = function () {
        var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        //var map = new google.maps.Map(document.getElementById("map"), {});
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    };

    document.addEventListener("deviceready", onDeviceReady, false);

} )(window);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>BlankCordovaApp1</title>

    <!-- BlankCordovaApp1 references -->
    <link href="css/index.css" rel="stylesheet" />

</head>
<body>
    <p>Hello, your application is ready!</p>

    <div id="map" style="width:100%; height:100%"></div>

    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <script src="scripts/index.js"></script>
    <script src="scripts/jquery-2.1.1.js"></script>

</body>
</html>

Somebody know why the emulator doesn't show the map?

regards

Solution

Make sure you replace API_KEY in the maps URL with your own API key. Otherwise Google will block the loading of the map.

Also make sure you include the "connection" plugin, otherwise navigator.connection will be undefined.

I also had a typo in my example code here:

    if (navigator.connection.type === Connection.NONE || google.maps) {

I was using google.maps without checking to see that google existed first. The corrected code (also corrected in my blog post) would be:

    if (navigator.connection.type === Connection.NONE || (global.google !== undefined && global.google.maps)) {

And finally, here is a working example.