Google Maps API is not working using Cordova

Question

Google Maps API is not working using Cordova

Navigation

#1 by (2 votes)

0

I'm developing an application for Android using Cordova, I'm doing the geo location working with the latitude and longitude of the user, taking this data, I create the map (the position of the user), and with that I create the markers (the markers on the map). On the desktop it works perfectly, but when I go to emulate on the phone, nothing happens.

HTML code:

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <meta name="msapplication-tap-highlight" content="no" />
        <script type="text/javascript" src="js/jquery1-7.js"></script>
        <link rel="stylesheet" type="text/css" href="css/responsivo.css">
        <link rel="stylesheet" type="text/css" href="css/icons.css">
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
        <title>Hello World</title>
        <script>
        function _GET(name)
        {
          var url   = window.location.search.replace("?", "");
          var itens = url.split("&");

          for(n in itens)
          {
            if( itens[n].match(name) )
            {
              return decodeURIComponent(itens[n].replace(name+"=", ""));
            }
          }
          return null;
        }
        var log = _GET("log");
        </script>
        <link rel="stylesheet" type="text/css" href="css/maps.css">
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"/></head><bodyonload="initialize()" id="tela-login">

        <script>

            function initialize() {

                function _GET(name){

                    var url   = window.location.search.replace("?", "");
                    var itens = url.split("&");

                    for(n in itens){
                        if( itens[n].match(name) ){
                            return decodeURIComponent(itens[n].replace(name+"=", ""));
                        }
                    }
                    return null;

                }

                var latitude = _GET("lat");
                var longitude = _GET("lon");

                var latlng = new google.maps.LatLng(latitude,longitude);

                var settings = {
                    zoom: 14,
                    center: latlng,
                    mapTypeControl: true,
                    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                    navigationControl: true,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                    mapTypeId: google.maps.MapTypeId.ROADMAP};

                var map = new google.maps.Map(document.getElementById("map_canvas"), settings);     

                    // AQUI É UM INDICADOR, E AQUI VAI O LOOP

                    var imagemPin = new google.maps.MarkerImage("images/google.png",
                        new google.maps.Size(50,50),
                        new google.maps.Point(0,0),
                        new google.maps.Point(25,50));

                    var Posicao = new google.maps.LatLng(latitude,longitude);

                    var Marcador = new google.maps.Marker({
                        position: Posicao,
                        map: map,
                        icon: imagemPin,
                        title:"LUGAR",
                        zIndex: 3});

                    google.maps.event.addListener(Marcador, "click", function() {
                        infoColinasWindow.open(map,Marcador);
                    });

                    var colinasString = "<div class='muralPin'><div class='imagemPin'><img src='felipe.jpg' style='width: 60%;'></div><div class='textoPin'><p>Olá eu sou o Felipe</p></div></div>";                

                    var infoColinasWindow = new google.maps.InfoWindow({
                        content: colinasString
                    });

                    //FIM DO INDICADOR

                    // AQUI É UM INDICADOR, E AQUI VAI O LOOP

                    var imagemPin = new google.maps.MarkerImage("images/google.png",
                        new google.maps.Size(50,50),
                        new google.maps.Point(0,0),
                        new google.maps.Point(25,50));

                    var Posicao = new google.maps.LatLng(-22.403954,-47.5717276);

                    var Marcador2 = new google.maps.Marker({
                        position: Posicao,
                        map: map,
                        icon: imagemPin,
                        title:"LUGAR",
                        zIndex: 3});

                    google.maps.event.addListener(Marcador2, "click", function() {
                        infoColinasWindow2.open(map,Marcador2);
                    });

                    var colinasString2 = "<div class='muralPin'><div class='imagemPin'><img src='mario.jpg' style='width: 60%;'></div><div class='textoPin'><p>Olá eu sou o Mario</p></div></div>";     

                    var infoColinasWindow2 = new google.maps.InfoWindow({
                        content: colinasString2
                    });

                    //FIM DO INDICADOR

            }

            </script>
        <div class="bartop-index-app">
            <div class="sair-index-app">

            </div>
            <div class="texto-bartop-index-app">
                <img src="img/logo.png">
            </div>
            <div class="login-v-index-app">
                <img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xpa1/t1.0-9/10440811_793958303957393_4162157372130782847_n.jpg"></div></div><divclass="mapaMural">
            <div id="map_canvas" style=""></div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

JS Code:

<script>
    if (navigator.geolocation){
      navigator.geolocation.getCurrentPosition(getPosicao, displayError);
    }

    function getPosicao(position){
      var lat = position.coords.latitude;

      var lon = position.coords.longitude;

      window.location = 'mapaAll.html?lat='+lat+'&lon='+lon;
     }

     function displayError(error) {
      var errors = {
        0: "Erro Desconhecido",
        1: "Permissão negada",
        2: "Posição indisponível",
        3: "Timeout"
      };
      alert("Ocorreu um erro: " + errors[error.code]);
    }
    </script>

In the JS code, I get the current location, and use window.location = 'mapaAll.html?lat='+lat+'&lon='+lon; passing the latitude and longitude to the HTML file.

Can anyone help me?

android apache-cordova

asked by anonymous 23.06.2014 / 15:28

1 answer

Glyphicon for bootstrap 4 does not work UPTADE in php, I'm not getting

score 2 · Answer 1

Your code has some problems. The first thing to note is that when you are developing applications with Cordova or PhoneGAP you should always check for the event deviceready .

The way Cordova works is very simple, it creates a kind of browser that runs your HTML. It also registers some functions in JavaScript to make integration native. This process takes some time, so Cordova adds this Listeners and then triggers the deviceready event.

What may be happening is that you call Geo Location functions before Cordova has created the interface between Android.

Other problems you may notice in your code is that in your _GET function you loop around for parameters every time, make sure that this is really necessary, this can slow down applications, especially on smartphones. One peculiarity is that Android may find that your application has crashed if at some point some loop does not end, this can leave your application completely locked down during the process. Browse makes all event-driven processes.

In part of your code you store the longitude and latitude data, you use the following code.

  var latitude = _GET("lat");
  var longitude = _GET("lon");
  var latlng = new google.maps.LatLng(latitude,longitude);

You are creating a map with the data obtained from the _GET function, ie the longitude and latitude must be passed next to the URL. In other words, with the code presented you make no calls to the Cordova API. Already in the part of your code that deals with the Cordova, you can implement differently, you try to update the URL of the browser to create the map, however this can make the page reload, which is not something that you can be doing in the Android. Also check that you have added the plugin responsible for GeoLocation on Android.

One solution would be to adjust your code to wait for Cordova to fire deviceready or to make some type of verification if your application is on a SmartPhone or if it is running in the browser. Only then create the map based on location.

Another thing that can be improved is that you currently get location with data passed by the URL, you can change it and use the Geo Location from HTML5.

If you find more problems you can check the errors found by the JavaScript within Android by opening the terminal and typing the adb logcat "CordovaLog: D *: S" command, all JavaScript errors and all output of console.log should be displayed.