javascript php google-maps currentlocation

How to make the current location Accurate using Gmap api v3?

I make some project for looking nearby location from my current location to my database location.This project run in localhost using XAMPP.

HTML :

 <body style="margin:0px; padding:0px;" onload="initMap()">
    <div>
         <label for="raddressInput">Search location:</label>
         <input type="hidden" id="addressInput" size="15" value="kudus" />
        <label for="radiusSelect">Radius:</label>
        <select id="radiusSelect" label="Radius">
          <option value="50" selected>50 kms</option>
          <option value="30">30 kms</option>
          <option value="20">20 kms</option>
          <option value="10">10 kms</option>
        </select>

        <input type="button" id="searchButton" value="Search"/>
    </div>
    <div><select id="locationSelect" style="width: 10%; visibility: hidden"></select></div>
    <div id="map" style="width: 100%; height: 90%"></div>

Javascript

  //this code to get current location
  if(!!navigator.geolocation) {

    var map;

    var mapOptions = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    navigator.geolocation.getCurrentPosition(function(position) {

        var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        var infowindow = new google.maps.InfoWindow({
            map: map,
            position: geolocate,
            content:"<b>Posisi Kamu Sekarang</b>"
        });
        var title = "<b>Posisi Kamu Sekarang</b>";
        var tanda = new google.maps.Marker({
        map: map,
        position: geolocate
      });
        google.maps.event.addListener(tanda, 'click', function() {
        infoWindow.setContent(title);
        infoWindow.open(map, tanda);
      });
        markers.push(tanda);
        map.setCenter(geolocate);

    });
<script async defer
    src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&key=Mykey&callback=initMap">
    </script>

When i load this code using public network. it load successfully, the marker and map showing my current location at "kudus". But when i try at my home, using Hotspot connection from my Redmi 4x.My Current location generate to "Semarang". How to make the current location accurate to my location now?

Solution

I Hope this is useful for you.

Please give your API-key and run this code.

<!DOCTYPE html>
<html>
  <head>
    <title>Place searches</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
        <link href="css1/font-awesome.css" rel="stylesheet">
    <link href="http://www.wisdomproperties.com/staging/css1/bootstrap.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>

body {  margin: 0;  }
#map {   width: 100%;   height: 100%; position: relative; }
.container{ margin: 0 auto; width: 70%; height: 500px; }
.placesCont {
    position: absolute;
    top: 45px;
    z-index: 1;
    margin-left: 20px;
    padding: 15px 10px 0;
}
.placesCont ul li{ cursor:pointer; }
.placesCont ul li a {
    display: inline-block;
    width: 55px;
    height: 55px;
    background: #66af5d;
    text-align: center;
    padding: 5px 0;
    border-radius: 50%;
    color: #fff;
    margin-bottom: 10px;
    border: 2px solid #fff;
}
.placesCont ul li:nth-child(2) a{ background:#1459d8;}
.placesCont ul li:nth-child(2) span{ background:#1459d8;}
.placesCont ul li:nth-child(3) a{  background:#bd6214;}
.placesCont ul li:nth-child(3) span{  background:#bd6214;}
.placesCont ul li:nth-child(4) a{  background:#7e8665; }
.placesCont ul li:nth-child(4) span{  background:#7e8665; }
.placesCont ul li:nth-child(5) a{ background:#936bbf; }
.placesCont ul li:nth-child(5) span{ background:#936bbf; }
.placesCont ul li:nth-child(6) a{ background:#f44336; }
.placesCont ul li:nth-child(6) span{ background:#f44336; }

.placesCont ul li a i { border: 3px solid #fff;  width: 42px; height: 42px; border-radius: 50%; padding: 10px 0; text-align: center;  margin-left: -2px; }

.placesCont ul li span {    display: inline-block;    background: #66af5d;    padding: 11px 40px;    margin-left: -29px;    border-radius: 70px;    z-index: -1;    position: relative;    width: 190px;    text-align: center;    text-transform: capitalize;  color: #fff;    top: 1px; }


    </style>

  </head>
  <body>
        <div class="container">
            <div id="map"></div>
            <div class="placesCont">
                <ul class="list-unstyled">
                    <li value="school" icon = https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png class="placeBtn" >
                        <a href="javascript:void(0);"><i class="fa fa-car active" title="parking"></i></a>
                        <span>parking</span>
                    </li>
                    <li value="restaurant" icon = http://182.156.201.194/wisdom_properties/images/icons/resturant.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-cutlery"  title="restaurant"></i></a>
                        <span>restaurant</span>
                    </li>
                    <li value="travel_agency" icon = http://182.156.201.194/wisdom_properties/images/icons/travelagncy.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-bus"  title="travel_agency"></i></a>
                        <span>travel agency</span>
                    </li>
                    <li value="hospital" icon = http://182.156.201.194/wisdom_properties/images/icons/hospital.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-heartbeat"  title="hospital"></i></a>
                        <span>hospital</span>
                    </li>
                    <li value="store" icon = http://182.156.201.194/wisdom_properties/images/icons/store.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-shopping-bag"  title="store"></i></a>
                        <span>store</span>
                    </li>
                    <li value="bank" icon = http://182.156.201.194/wisdom_properties/images/icons/bank.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-briefcase"  title="bank"></i></a>
                        <span>bank</span>
                    </li>
                </ul>
            </div>
    </div>

<script type="text/javascript" 
src="https://maps.googleapis.com/maps/api/js?key=Your-Kye&libraries=places&callback=initMap" async defer></script>
    <script>
        initialLocation = {lat: 13.001637, lng: 80.257942};
        map = document.getElementById('map');
        mapMarkers = [];
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        function initMap() {

          map = new google.maps.Map(map, {
            center: initialLocation,
            zoom: 15
          });

      setMarker(initialLocation, "Project Loction", "https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png");
      createRadiusCircle();

          infowindow = new google.maps.InfoWindow();
           var places = {
           restaurant:'restaurant',
           bank:'bank',
           store:'store',
           parking:'parking',
           travel_agency:'travel_agency',


          }

            var icons = {
          parking: {
            icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png'
          },
          library: {
            icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png'
          },
          info: {
            icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png'
          }
        };


          getPlaces(places,icons);


                  }

    function createRadiusCircle()
    {
      var radiusCircle = new google.maps.Circle({
        strokeColor: 'white',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#64B5F6',
        fillOpacity: 0.35,
        map : map,
        center : initialLocation,
        radius : 1000
      });
    }

       function setMarker(place, placeName, icon)
       {

            var icon = {
    url: icon, // url
    scaledSize: new google.maps.Size(20, 20), 

};

          marker = new google.maps.Marker({
            icon : icon,
            map : map,
            position : place,
            zoom : 15
          });
          mapMarkers.push(marker);
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(placeName);
            infowindow.open(map, this);
          });
       }
       function clearMarkers()
       {
          for (var index = 0; index < mapMarkers.length; index++) 
          {
      if(index)
      {
        mapMarkers[index].setMap(null);
      }

          }
          mapMarkers = []
       }

       function getPlaces(place,icon)
       {
          services =  new google.maps.places.PlacesService(map);
          var object = {
            location : initialLocation,
            radius : '1000',
            type : place

          }
         var callBackFunction = function(results, status)
         {
            if (status == google.maps.places.PlacesServiceStatus.OK) 
            {
              for (var i = 0; i < results.length; i++) 
              {
                var place = results[i];
                setMarker(place.geometry.location, place.name,place.icon);
              }
            }
         };

         services.nearbySearch(object, callBackFunction);
       }


       $(document).ready(function(){
          $(".placeBtn i").off("click").on("click", function(){
          $('.active').removeClass('active');
          $(this).addClass('active');
        });



         $(".placeBtn").off("click").on("click", function(){
           clearMarkers();
           var place = $(this).attr("value");
           var icon = $(this).attr("icon");

           getPlaces(place,icon);
         });
       })

      </script>
  </body>
</html>

Thanks

Nachimuthu.R