I got one console error when i try to run the code in my temp server "[Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS".
in my header am linking the script tag.
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlS6vRUDeM0XdliZ4iWDyDMekH45wYcck&libraries=places" type="text/javascript"></script>
Get your current position: Click here
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
document.getElementById("start").value = "";
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
document.getElementById('cityLat').value = position.coords.latitude;
document.getElementById('cityLng').value = position.coords.longitude;
}
</script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var bangalore = new google.maps.LatLng(12.9716, 77.5946);
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: bangalore
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var startLat = document.getElementById('cityLat').value;
var startLong = document.getElementById('cityLng').value;
var endLat = $('select.end').find(':selected').data('lat');
var endLong = $('select.end').find(':selected').data('long');
/*alert(startLat+"---"+startLong+"---"+endLat+"---"+endLong);*/
if(startLat && startLong){
var start = new google.maps.LatLng(startLat, startLong);
}else{
var start = document.getElementById("start").value;
}
var end = new google.maps.LatLng(endLat, endLong);
var distanceInput = document.getElementById("distance");
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
}
});
}
</script>
when i run the above code snippet in my local system i getting the map correctly.
when i move the code to testing server am getting the console error "[Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS"
I tried without https the script tag source link.
Anybody could you please give me a suggestion for this ? Thank you.
