Google geolocation works in the pc browser, but not in the android browser

Using Ruby, Sinatra, Slim, Javascript, Google maps v3 API. Geolocation works perfectly in the browser on the PC, the map is generated with the marker of the partner, when clicking the button is requested the geolocation to the browser, creates a new marker in that position and generates the route. But in the android browser when you click the button it falls into error:

infoWindow.setContent(browserHasGeolocation ?
'Erro: O serviço de geolocalização falhou.'

In my KEY API I activated everything that was related to MAPS and ANDROID.

I made a Fiddle, and it works on the android, except that it has no KEY API.

Fiddle

EDIT 1:   I found that google only allows to use getCurrentPosition () on HTTPS connections: // (it would never work by accessing my local IP), in heroku it only works if I use https: // before the address in both the PC browser and the android browser.

<button id="rota">Rota até o parceiro.</button>
<div id="map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=#{ENV['GOOGLE_API_KEY']}&callback=initMap"></script><script>varmap;varpos;//Pegaoclicknobotãodocument.getElementById("rota").onclick = function() {
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;
    directionsDisplay.setMap(map);
    var infoWindow = new google.maps.InfoWindow({map: map});

    // solicita ao browser a localização
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        infoWindow.setContent('Você está aqui.');
        map.setCenter(pos);

        // Gera a rota
        calculateAndDisplayRoute(directionsService, directionsDisplay, pos);
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  }

  function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
                          'Erro: O serviço de geolocalização falhou.' :
                          'Erro: O seu navegador não suporta geolocalização.');
  }

  // Primeira função chamada quando o mapa é gerado
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: {lat: -3.7913486, lng: -38.589312}
    });
    var geocoder = new google.maps.Geocoder();

    geocodeAddress(geocoder, map);
  }

  // Cria o marcador para o endereco do parceiro
  function geocodeAddress(geocoder, resultsMap) {
    var address = 'Fortaleza - CE';
    geocoder.geocode({'address': address}, function(results, status) {
      if (status === 'OK') {
        resultsMap.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: resultsMap,
          position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

  // Função que gera rota
  function calculateAndDisplayRoute(directionsService, directionsDisplay, pos) {
    directionsService.route({
      origin: pos,
      destination: 'Fortaleza - CE',
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode['DRIVING']
    }, function(response, status) {
      if (status == 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
</script>
<style>
  /* Always set the map height explicitly to define the size of the div
  * element that contains the map. */
  #map {
    height: 300px;
  }
</style>