$(document).ready(function(){
function myplace()
{
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
geocoding(position.coords.latitude, position.coords.longitude);
});
} else
{
alert("Geolocation API не поддерживается в вашем браузере");
}
}
function geocoding(lat, lon)
{
var my_adress;
var api_key = 'AIzaSyAsuS1MqzRBzRv1HRrfrlyoMRlkrVXEx0g';
var cordinats = [lat, lon];
var loctype = 'ROOFTOP';
var restype = 'street_address';
var position = cordinats.join(",");
var data = {latlng: position, location_type: loctype, result_type: restype, key: api_key};
$.ajax({
method: "GET",
url: "https://maps.googleapis.com/maps/api/geocode/json",
data: data,
dataType: 'json',
success: function (result) {
console.log(result)
my_adress = result.results[0].formatted_address;
alert("Вы здесь" + " " + "<" + " " + my_adress + " " + ">");
/-----------------------GMaps Initialization-------------------------------/
function initMap() {
var latlng = new google.maps.LatLng(lat, lon);
var mapOptions = {
center: latlng,
zoom: 14,
mapTypeControl: false,
streetViewControl: false,
styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Вы знаходитесь в данном месте"
});
}
function drivingRoute(from, to) {
var request = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
$('#controls p').removeClass('error');
$('#controls p').text('loading');
if(typeof(drivingLine) !== 'undefined') drivingLine.setMap(null);
directionsService.route(request, function(response, status){
if(status == google.maps.DirectionsStatus.OK){
var totalKM = (response.routes[0].legs[0].distance.value / 1000);
var miles = Math.round(totalKM * 1 * 10) / 10;
var distanceText = miles+' КМ';
$('#controls p').text(distanceText);
drivingLine = new google.maps.Polyline({
path: response.routes[0].overview_path,
strokeColor: "#b00",
strokeOpacity: .75,
strokeWeight: 5
});
drivingLine.setMap(map);
map.fitBounds(response.routes[0].bounds);
}
else {
$('#controls p').addClass('error');
$('#controls p').text('cannot load route');
}
});
}
$('input').blur(function(){
drivingRoute(
$('input[name=from]').val(),
$('input[name=to]').val()
);
});
var map;
var drivingLine;
var directionsService = new google.maps.DirectionsService();
initMap();
$('input[name=from]').val(my_adress);
$('input[name=to]').val('');
$('input[name=from]').trigger('blur');
},
error: function (err) {
console.log("Ошибка сервера")
}
})
}
myplace();
markermap();
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Route Aplication</title>
<link media="screen" href="demo/styles/demo.css" type="text/css" rel="stylesheet" />
<link rel="shortcut icon" href="http://www.rudebox.org.ua/wp-content/themes/mystique/favicon.ico" />
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<br><br>
<div id="controls">
<label><span><b>От куда:</b></span> <input type="text" name="from"></label>
<label><span><b>Куда:</b></span> <input type="text" name="to"></label>
<p></p>
</div>
<div id="map"></div>
<script src="js/jquery-3.2.1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsuS1MqzRBzRv1HRrfrlyoMRlkrVXEx0g&callback=initMap"></script>
<script src="js/maps.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
</body>
</html>html,
body {
position: relative;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
font-size: 12pt;
color: #000;
overflow: hidden;
}
#map {
margin-left: 420px;
width: 700px;
height: 490px;
}
#controls {
position: absolute;
top: 4.1em;
right: 1.5em;
z-index: 10;
background: #fff;
padding: 1em 2em;
opacity: .8;
border-top: solid .4em #444;
border-bottom: solid .4em #444;
}
#controls label {
display: block;
margin: 1em 0;
}
#controls label span {
display: inline-block;
min-width: 3.5em;
}
#controls label input {
font-family: 'Montserrat';
font-size: 12pt;
padding-bottom: .2em;
width: 10em;
border: none;
border-bottom: solid 1px #999;
color: #000;
outline: none;
webkit-appearance: none;
}
#controls p {
text-align: right;
font-size: 80%;
margin: 1em 0 .5em 0;
}
#controls p.error {
color: #b00;
}
Средний
Простой
Простой