https://github.com/davepartner/google-map-direction-geolocation
A javascript sample code for plotting direction from user's current location to their destination
https://github.com/davepartner/google-map-direction-geolocation
Last synced: 9 months ago
JSON representation
A javascript sample code for plotting direction from user's current location to their destination
- Host: GitHub
- URL: https://github.com/davepartner/google-map-direction-geolocation
- Owner: davepartner
- Created: 2018-05-14T16:21:10.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-14T16:49:52.000Z (about 8 years ago)
- Last Synced: 2025-02-26T02:42:09.311Z (over 1 year ago)
- Size: 14.6 KB
- Stars: 6
- Watchers: 2
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# google-map-direction-geolocation
A javascript sample code for plotting direction from user's current location to their destination
# This javascript code simply fetches the user's current location (latitude and longitude) as the origin, then accepts
a text address as the destination. That's what makes this code useful.
## Write this CSS code for the map. Note that if there is no width and height, sorry your evil map will not work and it will not tell you why
````
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 400px;
width: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
````
## Paste this HTML anywhere in your page where you want the map to show
`
`
## The below is just an element holding the destination, I have it hidden. You can unhide yours.
## Below is the javascript, please read the instruction in the last 3 lines of the javascript
````
function initMap() {
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
window.pos = pos;
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
// ourOrigin = new google.maps.LatLng(pos.lat, pos.lng);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: pos.lat, lng: pos.lng}
});
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
console.log("Testing : "+pos);
directionsService.route({
origin: new google.maps.LatLng(pos.lat, pos.lng),
destination: document.getElementById('end').value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
//you need to enable google map, and google direction javascript APIs from inside your http://console.developers.google.com account
//STEPS
//1. Login, create a project, then click on "ENABLE APIs and SERVICES" at the top of the page
//2. Enable 3 APIs - Geolocation API, Directions API, Maps Javascript API
//3. If you are using this code outside of the web, eg. android, you have to enable the 'maps sdk for android' or ios as the case may be
//You then have to insert the key in place of the GOOGLE-MAP-DIRECTION-API-KEY above.
````
## Thank me
If this code saved your life, check me out on udemy.com/users/daveozoalor