PhoneGap and Google Map

Question

For a school project I've to do a PhoneGap application. I want to do a div with a map, and after makes interest points. But it's impossible to have it in my android emulator, got the error "referenceError can't find variable google". I tried a lot of solution I've found and the only thing I can do it's to show a little piece of map on the top of my application, but only on an internet browser.

<!DOCTYPE HTML>  
<html>  
<head>  

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script src="jquery.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.css" />

<script src="jquery.mobile-1.3.0.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>

<style type="text/css">
    #footer {
        position:fixed;
        bottom:0;
        left:0;
        right:0;
    }

    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map-canvas { height: 100% }

</style> 


<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKh2nx6OdT6pdPi-KtPNH_6Lc7Aj9z7d4&sensor=true">
</script>


<script type="text/javascript">
  function initialize() {
    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-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

</head>

<body>

If someone have a piece of code working on his computer, or find an error on mine i would be very happy. Thanks.

Uncharted Space · Accepted Answer · 2013-04-18T17:23:40.890

2

The following works for me in my Nexus 4 emulator. Taken mostly from Google Maps JavaScript API:

<!DOCTYPE HTML>
<html>
    <head>

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script scr="jquery.js></script>
        <link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
        <script type="text/javascript" src="cordova-2.4.0.js"></script>
        <script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>

    <style type="text/css">
        html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 100%;
        }

    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script type="text/javascript">
        function initialize() {
            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-canvas"),
                                          mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        </script>
</head>

<body>
    <div id="map-canvas"></div>
</body>
</html>

edited Apr 18 '13 at 17:23

answered Apr 18 '13 at 16:19

Uncharted Space

861
7
13

But there's something really strange. If I don't have "jquery.js" in my project there's no problem, but if it is, I only got a white page – nebra Apr 18 '13 at 17:06
Do you have a file named "jquery.js" in your www folder? – Uncharted Space Apr 18 '13 at 17:24
You may have to change some of the script src's depending on your file names and where they are in your project. – Uncharted Space Apr 18 '13 at 17:30
Yes I changed names (not the same version of cordova), I have a file "jquery.js" and it's doesn't work anymore, just a white screen. But if I delete the file "jquery.js" there's no problems – nebra Apr 18 '13 at 17:34
No problems except that you have no jquery :) Try replacing your jquery with a fresh version (which ever jquery version you prefer) and maybe bring it in after cordova. Also add the type="text/javascript" to the script tag. – Uncharted Space Apr 18 '13 at 18:13
@UnchartedSpace why you have added – Pratik Butani Jul 15 '13 at 07:52

PhoneGap and Google Map

1 Answers1