Я создаю сайт, на котором я хочу реализовать API-интерфейс google-map, находясь рядом с поиском по месту, найти расстояние и показать место в соответствии с расстоянием.Создать поиск в google api с помощью поискового запроса
Еще раз я только что создал карту и воспользовался поиском google place api. Работа, которую я делал это для link here
Я просто хочу, чтобы создать карту нечто вроде этого page
пожалуйста, попробуйте этот
<html>
<head>
<meta charset="UTF-8">
<title>nearby</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel="stylesheet" href="style.css">
<script src='http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false'></script>
<script src='https://www.google.com/jsapi'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="script.js"></script>
</head>
<body>
<div id="gmap_canvas"></div>
<div class="actions">
<div class="button">
<label for="gmap_type">Type:</label>
<select id="gmap_type">
<option value="art_gallery" onclick="findPlaces();" >art_gallery</option>
<option value="atm" onclick="findPlaces()" >atm</option>
<option value="bank" onclick="findPlaces()" >bank</option>
<option value="bar" onclick="findPlaces()" >bar</option>
<option value="cafe" onclick="findPlaces()" >cafe</option>
<option value="food" onclick="findPlaces()" >food</option>
<option value="hospital" onclick="findPlaces()" >hospital</option>
<option value="police" onclick="findPlaces()" >police</option>
<option value="store" onclick="findPlaces()" >store</option>
</select>
</div>
<div class="button">
<label for="gmap_radius">Radius:</label>
<select id="gmap_radius">
<option value="500" onclick="findPlaces()">500</option>
<option value="1000" onclick="findPlaces()" >1000</option>
<option value="1500" onclick="findPlaces()" >1500</option>
<option value="5000" onclick="findPlaces()" >5000</option>
</select>
</div>
<input type="hidden" id="lat" name="lat" value="51.5" />
<input type="hidden" id="lng" name="lng" value="-0.126" />
<div id="button1" class="button" onclick="findPlaces(); return false;">Search</div>
</div>
<table id="Display" class="table table-striped">
<tr>
<th>Name Of Place</th>
<th id="city_header">Distance From Selected Place (in km)</th>
</tr>
</table>
JS
var geocoder;
var map;
var markers = Array();
var infos = Array();
var datas= Array();
var sortS= Array();
var TempA=Array();
var sortN= Array();
var min=1000;
var minNam='sa';
var myJsonString='';
function initialize() {
// prepare Geocoder
geocoder = new google.maps.Geocoder();
// set initial position (New York)
var myLatlng = new google.maps.LatLng(51.5, -0.126);
var myOptions = { // default map options
zoom: 16,
center: myLatlng,
scrollwheel: false,
panControl: true,
streetViewControl: true,
mapTypeControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers": [{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}]
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
}
// clear overlays function
function clearOverlays() {
if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
markers = [];
infos = [];
}
}
// clear infos function
function clearInfos() {
if (infos) {
for (i in infos) {
if (infos[i].getMap()) {
infos[i].close();
}
}
}
}
// find custom places function
function findPlaces() {
$('#Display').find("tr:gt(0)").remove();
// prepare variables (filter)
var type = document.getElementById('gmap_type').value;
var radius = document.getElementById('gmap_radius').value;
var lat = document.getElementById('lat').value;
var lng = document.getElementById('lng').value;
var cur_location = new google.maps.LatLng(lat, lng);
// prepare request to Places
var request = {
location: cur_location,
radius: radius,
types: [type]
};
// send request
service = new google.maps.places.PlacesService(map);
service.search(request, createMarkers);
}
// create markers (from 'findPlaces' function)
function createMarkers(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
// if we have found something - clear map (overlays)
clearOverlays();
// and create new markers by search result
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
// console.log(datas+'datas');
myJsonString = JSON.stringify(datas);
parse($.parseJSON(myJsonString));
console.log(sortS);
TempA = sortS.slice();
console.log(TempA);
sortS.sort();
console.log(sortS);
console.log(sortN);
for (var i = 0; i < sortS.length; i++) {
console.log(sortN[TempA.indexOf(sortS[i])]);
$('#Display').append('<tr><td>'+sortN[TempA.indexOf(sortS[i])]+'</td><td>'+sortS[i]+'</td></tr>');
//parseSort($.parseJSON(myJsonString),sortS[i]);
//console.log(sortN[TempA.indexOf(sortS[i])]);
}
datas=[];
myJsonString='';
sortS= [];
TempA=[];
sortN= [];
// c
} else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
alert('Sorry, nothing is found');
}
}
// creare single marker function
function createMarker(obj) {
// prepare new Marker object
var mark = new google.maps.Marker({
position: obj.geometry.location,
map: map,
title: obj.name
});
// alert(obj.name);
var lat=document.getElementById('lat').value;
var long=document.getElementById('lng').value;
var p1 = new google.maps.LatLng(lat,long);
var p2 = new google.maps.LatLng(obj.geometry.location.lat(),obj.geometry.location.lng());
google.maps.LatLng.prototype.distanceFrom = function(latlng) {
var lat = [this.lat(), latlng.lat()]
var lng = [this.lng(), latlng.lng()]
var R = 6378137;
var dLat = (lat[1]-lat[0]) * Math.PI/180;
var dLng = (lng[1]-lng[0]) * Math.PI/180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat[0] * Math.PI/180) * Math.cos(lat[1] * Math.PI/180) *
Math.sin(dLng/2) * Math.sin(dLng/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
return Math.round(d);
}
obj.geometry.location.lng());
var dist = p2.distanceFrom(p1);
var distn=dist;
var dost=distn+(distn <1 ? "m" : "km")
datas.push({ place:obj.name,Distance:distn});
markers.push(mark);
// prepare info window
var infowindow = new google.maps.InfoWindow({
content: '<img src="' + obj.icon + '" /><font style="color:#000;">' + obj.name +
'<br />Rating: ' + obj.rating + '<br />Vicinity: ' + obj.vicinity + '</font>'
});
// add event handler to current marker
google.maps.event.addListener(mark, 'click', function() {
clearInfos();
infowindow.open(map,mark);
});
infos.push(infowindow);
console.log(myJsonString);
}
console.log(myJsonString+'sa');
console.log(datas+'datas');
var v=0;
function parse(obj) {
// Do something.
$.each(obj, function(idx,obj1) {
if(typeof obj1 =='object')
{ parse(obj1);
}else{
if(idx==='place')
{
sortN.push(obj1);
}
if(idx==='Distance')
{
sortS.push(obj1);
}
}
});
}
function parseSort(obj,i) {
$.each(obj, function(idx,obj1) {
if(typeof obj1 =='object')
{ parseSort(obj,i);
}else{
alert(idx+":"+obj1);
var previous='';
if(idx==='place')
{
previous=obj1;
}
if(idx==='Distance')
{
if(i===obj1)
{
alert("here");
// $('#Display').append('<tr><td>'+obj1+'</td><td>'+previous+'</td></tr>');
}
}
}
});
}
//parse(datas);
function SortF(){
var table = $('#Display');
$('#facility_header, #city_header')
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
});
}
некоторые CSS
#gmap_canvas {
height: 300px;
position: relative;
width: 100%;
float:left;
}
.actions {
background-color: #FFFFFF;
bottom: 30px;
padding: 10px;
float:left;
right: 30px;
z-index: 2;
border-top: 1px solid #abbbcc;
border-left: 1px solid #a7b6c7;
border-bottom: 1px solid #a1afbf;
border-right: 1px solid #a7b6c7;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
#Display{
float:left;
width:75%;
}
.actions label {
display: block;
margin: 2px 0 5px 10px;
text-align: left;
}
.actions input, .actions select {
width: 85%;
}
.button {
background-color: #d7e5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
border-top: 1px solid #abbbcc;
border-left: 1px solid #a7b6c7;
border-bottom: 1px solid #a1afbf;
border-right: 1px solid #a7b6c7;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 0 white;
-moz-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
color: #1a3e66;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",Geneva, Verdana, sans-serif;
line-height: 1;
margin-bottom: 5px;
padding: 6px 0 7px 0;
text-align: center;
text-shadow: 0 1px 1px #fff;
width: 150px;
}
.button:hover {
background-color: #ccd9e8;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccd9e8), color-stop(100%, #c1d4e8));
background-image: -webkit-linear-gradient(top, #ccd9e8, #c1d4e8);
background-image: -moz-linear-gradient(top, #ccd9e8, #c1d4e8);
background-image: -ms-linear-gradient(top, #ccd9e8, #c1d4e8);
background-image: -o-linear-gradient(top, #ccd9e8, #c1d4e8);
background-image: linear-gradient(top, #ccd9e8, #c1d4e8);
border-top: 1px solid #a1afbf;
border-left: 1px solid #9caaba;
border-bottom: 1px solid #96a3b3;
border-right: 1px solid #9caaba;
-webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
-moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
box-shadow: inset 0 1px 0 0 #f2f2f2;
color: #163659;
cursor: pointer;
}
.button:active {
border: 1px solid #8c98a7;
-webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
-moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
}
Для расстояния, я использовал API Google Geocoder для проекта я имел.
Вот Gist Я сделал, вы можете перевести это на любой язык, который вы используете. В основном, называют этот URL:
"https://maps.googleapis.com/maps/api/geocode/json?address=[YOUR_ADDRESS_STRING]"
И API возвращает кучу информации. Наиболее важным является Широта и долгота. Чем, вы можете использовать их в Haversine Formula. Формула принимает две точки (их широту и долготу) и вычисляет расстояние между этими точками.
Найти больше на: https://developers.google.com/maps/documentation/geocoding/intro
я не выполнил маркеры на карте или что-нибудь еще, но я надеюсь, что это может помочь вам с расстояниями.
Это не то же самое, я ищу, но я дам вам щедрость, если никто не даст ответ. благодаря – Sen
Покажите нам, что вы делали до сих пор? –
Я добавил свой плункер. – Sen