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.

Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top