Skip to content

Instantly share code, notes, and snippets.

@Tushkiz

Tushkiz/chargingStation.html

Created December 15, 2018 08:07
Show Gist options
  • Save Tushkiz/d93514d99a2aaafb655aa7b751611efa to your computer and use it in GitHub Desktop.
Save Tushkiz/d93514d99a2aaafb655aa7b751611efa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chargingStation.html
<!DOCTYPE html>
<html>
<head>
<title>Nearest Chariging Station</title>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
<script>
var parkingList = {
"area": [{
"name": "Swargate (PMC) Parking",
"address": "Narveer Tanaji Malusare Rd, Dadawadi, Swargate, Pune, Maharashtra 411009, India",
"lat": 18.498535,
"lng": 73.857833
},
{
"name": "Laxmi Road Parking ",
"address": "City Jewel Building, Laxmi Rd, Bhatancha Bol, Narayan Peth, Pune, Maharashtra 411030, India",
"lat": 18.514436,
"lng": 73.851273
},
{
"name": "Bharat Petrolium (RTO)",
"address": "Mumbai - Pandharpur Road, Juna Bazar, Sangamvadi, Pune, Maharashtra 411001, India",
"lat": 18.529152,
"lng": 73.863105
},
{
"name": "Pune Station Parking",
"address": "Sanjay Gandhi Rd, Agarkar Nagar, Pune, Maharashtra 411001, India",
"lat": 18.527689,
"lng": 73.872692
},
{
"name": "HP Petrol Pump ,Mangalvar Peth",
"address": "208, Rajlaxmi Co-operative Housing Society, Mangalwar Peth, Kasba Peth, Pune, Maharashtra 411011, India",
"lat": 18.526837,
"lng": 73.864549
},
{
"name": "Babu Genu Parking (Mandai)",
"address": "1084, Shanipar Mandai Rd, Tulshibaug, Budhwar Peth, Pune, Maharashtra 411002, India",
"lat": 18.513532,
"lng": 73.856227
},
{
"name": "Satish Misal Parking (Mandai)",
"address": "59, Gayakwad Path, Mandai, Shukrawar Peth, Pune, Maharashtra 411002, India",
"lat": 18.512743,
"lng": 73.855919
},
{
"name": "Rajiv Gandhi Parking (Snake Park Katraj)",
"address": "29/44, Pune - Bengaluru Hwy, Kala Nagar, Dhankawadi, Pune, Maharashtra 411043, India",
"lat": 18.455296,
"lng": 73.858843
},
{
"name": "PMC Parking (Near Katraj Dairy)",
"address": "29/44, Pune - Bengaluru Hwy, Kala Nagar, Dhankawadi, Pune, Maharashtra 411043, India",
"lat": 18.456134,
"lng": 73.858371
},
{
"name": "Jagtap HP Petrol Pump",
"address": "A3, Pimple Saudagar Rd, Pimple Saudagar, Pimpri-Chinchwad, Maharashtra 411027, India",
"lat": 18.596982,
"lng": 73.812338
},
{
"name": "Narayan peth (Hamalwada)",
"address": "Gajanan Chaitanya Building, Lokhande Talim Rd, Bhatancha Bol, Narayan Peth, Pune, Maharashtra 411030, India",
"lat": 18.515520,
"lng": 73.85063
},
{
"name": "Haribhau Sane parking, Narayan peth",
"address": "336, Narayan Peth, Pune, Maharashtra 411030, India",
"lat": 18.514685,
"lng": 73.847980
},
{
"name": "FC road parking, near Pizza Hut, FC road",
"address": "11719b, FC Rd, Deccan Gymkhana, Pune, Maharashtra 411004, India",
"lat": 18.522067,
"lng": 73.841072
},
{
"name": "Pay & park, in front of FC college",
"address": "1215/1, Shirole Road, Shivajinagar, Pune, Maharashtra 411004, India",
"lat": 18.522620,
"lng": 73.841443
},
{
"name": "PMC parking , Tatyasaheb Karndikar path, Modi Ganpati",
"address": "331, Lokhande Talim Rd, Narayan Peth, Pune, Maharashtra 411030, India",
"lat": 18.515347,
"lng": 73.847881
},
{
"name": "KK Market petrol pump",
"address": "635/8, Bibvewadi, Pune, Maharashtra 411037, India",
"lat": 18.469669,
"lng": 73.863669
},
{
"name": "Satara road HP petrol pump",
"address": "102-691, Pune - Bengaluru Hwy, Vasant Baug, Vasant Baug Society, Maharshi Nagar, Pune, Maharashtra 411037, India",
"lat": 18.485855,
"lng": 73.857585
},
{
"name": "Bhapkar petrol pump",
"address": "692/A, Pune - Bengaluru Hwy, Arihant Society, Maharshi Nagar, Pune, Maharashtra 411037, India",
"lat": 18.488186,
"lng": 73.857246
},
{
"name": "Indian Oil petrol pump Sinhagad road",
"address": "567, Sinhagad Rd, Slum Area, Dandekar Pool, Municipal Colony, Pune, Maharashtra 411030, India",
"lat": 18.501051,
"lng": 73.846384
},
{
"name": "Swargate petrol pump, Subhashnagar",
"address": "Modi Tower, Lokmanya Bal Gangadhar Tilak Rd, Subhash Nagar, Shukrawar Peth, Pune, Maharashtra 411002, India",
"lat": 18.501416,
"lng": 73.858337
}
]
}
function calculateAndDisplayRoute(currentLocation, destinationPS) {
// plots route between two locations
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: currentLocation
});
directionsDisplay.setMap(map);
directionsService.route({
origin: currentLocation,
destination: destinationPS,
travelMode: google.maps.TravelMode["DRIVING"]
},
function (response, status) {
if (status == 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
function deleteMarkers(markersArray) {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray = [];
}
function initMap(currentLocation, currentLocationAddress) {
var service = new google.maps.DistanceMatrixService;
var originList;
var destinationList;
var i;
var results;
var j;
var nearestPoint;
var distances = [];
// plot all the parking areas and show their distances
service.getDistanceMatrix({
origins: [currentLocation],
destinations: parkingList.area,
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
},
function (response, status) {
if (status !== 'OK') {
alert('Error was: ' + status);
} else {
originList = response.originAddresses;
destinationList = response.destinationAddresses;
for (i = 0; i < originList.length; i++) {
results = response.rows[i].elements;
for (j = 0; j < results.length; j++) {
distances.push(parseFloat(results[j].distance.text))
}
}
nearestPoint = Math.min(distances);
var destinationPS = parkingList.area[nearestPoint];
document.getElementById("res").innerHTML = "<b>Results</b>";
document.getElementById("source1").innerHTML = "<b>Source address:</b> &nbsp&nbsp " + currentLocationAddress;
document.getElementById("sourceCoords").innerHTML = "<b>Source Co-ordinates = </b> &nbsp&nbsp Lat:" +
currentLocation.lat + "&nbsp&nbsp Lng:" + currentLocation.lng;
document.getElementById("des1").innerHTML = "<b>Nearest Charging Station:</b> &nbsp&nbsp " + destinationPS.name;
document.getElementById("desCoords").innerHTML = "<b>Charging Station Co-ordinates = </b> &nbsp&nbsp Lat:" +
destinationPS.lat + "&nbsp&nbsp Lng:" + destinationPS.lng;
document.getElementById("dist").innerHTML = "<b>Distance (in KMs):</b> &nbsp&nbsp " + distances[nearestPoint];
document.getElementById("timeReq").innerHTML = "<b>Time:</b> &nbsp&nbsp " + results[nearestPoint].duration.text;
// show route between current location and nearest point
calculateAndDisplayRoute(currentLocation, destinationPS)
}
}
);
}
function showPosition(position) {
var currentLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
// currentLocation = { lat: 18.51857196474518, lng: 73.86838306843248 };
var geocoder = new google.maps.Geocoder;
geocoder.geocode({
'location': currentLocation
},
function (results, status) {
if (status === 'OK') {
if (results[0]) {
initMap(currentLocation, results[0].formatted_address);
} else {
document.getElementById("error").innerHTML = "Error: No results found";
}
} else {
document.getElementById("error").innerHTML = "Geocoder failed due to: " + status;
}
}
);
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
document.getElementById("error").innerHTML = "Error: User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("error").innerHTML = "Error: Location information is unavailable."
break;
case error.TIMEOUT:
document.getElementById("error").innerHTML = "Error: The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
document.getElementById("error").innerHTML = "Error: An unknown error occurred."
break;
}
}
function getLocation() {
// request for device location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
document.getElementById("error").innerHTML = "Error: Geolocation is not supported by this browser.";
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDhPiRyV063UI4502AS-IN59FJ4sv7xMV8"></script>
</head>
<body>
<div>
<br>
<button name="search" id="search" onclick="getLocation()">Nearest Station </button>
<H2 id="res"></H2>
<p id="source1"></p>
<p id="sourceCoords"></p>
<p id="des1"></p>
<p id="desCoords"></p>
<p id="dist"></p>
<p id="timeReq"></p>
<p id="error"></p>
</div>
<br>
<div id="output"></div>
<br>
<div id="map"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment