Как сделать текущее местоположение точным с помощью Gmap API v3?

Question

Как сделать текущее местоположение точным с помощью Gmap API v3?

Я создаю какой-то проект для поиска ближайшего местоположения от моего текущего местоположения до местоположения в моей базе данных. Этот проект выполняется на локальном хосте с использованием 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>

Когда я загружаю этот код, используя общедоступную сеть. загрузится успешно, маркер и карта с указанием моего текущего местоположения на «кудус». Но когда я пытаюсь у себя дома, используя соединение Hotspot от моего Redmi 4x.Мое текущее местоположение генерирует «Semarang».
Как сделать текущее местоположение точным для моего местоположения сейчас?

-1

currentlocation google-maps javascript php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Надеюсь, это полезно для вас.

Пожалуйста, дайте свой API-ключ и запустите этот код.

<!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>

Спасибо

Nachimuthu.R

1