title: Geolocation html5 not working for Oppo and Honor Android phones
body: <p>This is code I am using to build Google Maps this is working in 80% of Android phones but the local phone manufacturer is not supporting this as I am not able to get coordinates in phones like OPPO, HONOR many more.</p>
  
  <p>I tried Google Geolocation API that doesn't give exact latlng.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function inti () {
          if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(geoLocationSucess);
  
  
  
              backview = "views/home.html";
          }
  
     
  }
  
  
  
  function writeAddress(latLng) {
  
      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({
          "location": latLng
      },
          function (results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
  
                  var rr = results[0].formatted_address;
  
                  var res = rr.split(",");
                  //  alert(res[0] + ", " +res[1]+ "," + res[2]);
  
  
              } else
                  "Unable to retrieve your address" + "&lt;br /&gt;";
          });
  }
  
  
  function initialize() {
  
      //checker to watch position every sec if position fixed it will not refresh
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(geoLocationSucess, showError);
  
      } else
          alert("Your Device does't support geolocation.");
  }
  
  function geoLocationSucess(position) {
  
      var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  
      writeAddress(userLatLng)
  
      var myOptions = {
          zoom: 15,
          center: userLatLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var mapObject = new google.maps.Map(document.getElementById("googleMap"), myOptions);
  
      var marker = new google.maps.Marker({
          map: mapObject,
          position: userLatLng
  
      });
      var sunCircle = {
          strokeColor: "#7DB1E8",
          strokeOpacity: 0.5,
          strokeWeight: 2,
          fillColor: "#7DB1E8",
          fillOpacity: 0.25,
          map: mapObject,
          center: userLatLng,
          radius: 200 // in meters
      };
      var cityCircle = new google.maps.Circle(sunCircle);
      cityCircle.bindTo(center, marker);
  
  
  
  
  }
  function showError(error) {
  
      switch (error.code) {
          case 1:
              alert("User denied the request for Geolocation.");
              break;
          case 2:
              alert("Location information is unavailable. Please ensure Location is On");
              break;
          case 3:
              break;
          case 4:
              alert("An unknown error occurred.");
              break;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;style&gt;
          #googleMap {
              width: 100%;
              height: 80vh;
          }
      &lt;/style&gt;
    &lt;body&gt;
      &lt;div id="googleMap"&gt; &lt;/div&gt; &lt;span id="locate" data-role="touch"&gt;&lt;a data-role="button"  onclick="initialize()"
          id="locate" style=" width:50%;background:#18515C;" &gt;Locate Me
      &lt;/a&gt;&lt;/span&gt; &lt;span id="punch" data-role="touch"&gt;&lt;a data-role="button"  onclick="punch()"
          id="punch" style="width:40%;background:#18515C; "&gt;Punch
      &lt;/a&gt;&lt;/span&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>