Cześć,
Robie projekt w którym przegladarka pyta sie o twoja obecna lokalizacje i na jej podstawie rysuje na mapie droge do markera dodanego na mapie. Mam problem z rysowaniem, uzywam google maps api
Oto kod:
<div id="map"></div>
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 52.4128900, lng: 17.0850300 },
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 15
});
directionsDisplay.setMap(map);
// przystanki
var marker = new google.maps.Marker({
position: { lat: 52.4128900, lng: 17.0850300 },
map: map,
title: 'Przystanek nr1'
});
var marker2 = new google.maps.Marker({
position: { lat: 52.406102, lng: 17.074135 },
map: map,
title: 'Przystanek nr2'
});
var infoWindow = new google.maps.InfoWindow({ map: map });
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Tutaj jesteś');
map.setCenter(pos);
}, function () {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
var onChangeHandler = function () {
calculateAndDisplayRoute(directionsService, directionsDisplay, position, marker);
};
document.getElementById('position');
document.getElementById('marker');
}
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, position, marker) {
directionsService.route({
origin: document.getElementById('position').value,
destination: document.getElementById('marker').value,
travelMode: 'WALKING'
}, function (response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Ktoś może mi pomóc ?