Thanks for all your feedback. Sorry I haven't checked back here in a while to answer questions. I have added a link to the example code in the video description for those who would like it.
+Dave Wallace hey im having trouble with it. What would i change if i wish for it to look for something else the code that you put was different from the one in the video so its confusing
Dave….thanks solo much for this tutorial. It is great and everything was working fine until 41:10 in the video. My markers are not being placed on the map. I can get the results[i].geometry.location to appear in the console log and even alert the coordinates for results[i].geometry.location but no markers.I have viewed the code line by line and I cannot see my error. Is it possible to post the code from this video. I saw the code that was posted in the comments but it is different than what is in the video. Is anyone else having this issue? Thanks again
I haven't really looked into this, but I imagine if the map itself supports indoor maps then there's no reason why it shouldn't show up on the Javascript API. It may just be that it is a new feature and isn't yet working everywhere.
Hi great video! Do you know of a way to extract the traffic data from google maps traffic layer using the api? I want this for just a small location not for everywhere.
Excellent explanation. Thank you for this very helpful tutorial. Have you done a video demostration on how to create reviews for a website?. I'd love to be able to have google reviews using javascript. Please let me know the link if you have done it already. Thanks
Dave, great tutorial, easy to follow and well explained as you went. I managed to get it all working with the help of the download, but I was wondering if you could help an old ex Brissy boy with an extension to that. I am an amateur webmaster looking after a club website I built and I would like to create a "Personalised Directions" page to our next club run, instead of the one size fits all, fixed directions I currently create with Google maps and imbed in the site. So in a nutshell I want to use the Directions Service to add a destination and a suggested route, the destination will always be a LngLat coordinate. Can you help me with this please, it is doing my 57 yr old head in trying to make it work. Many Thanks in Advance. Paul Cade
Awesome video! It would be cool if you could lets say the user wants to save an address that is saved in the database and then display the address on the users show page with a marker on the googlemaps api of that particular address the user inputed. Somehow need to access the information the user inputed in the database and then geocode that into lat and longitude.. i guess? what do you think?
Dave, Thank you very much for this awesome post. I`m new to this and i must say i have learnt a lot already because of this video. I cant seem to find the link to code. I can share with me pls?????????????? Thnxxxx
TypeError: google.maps.places is undefined at Mozila Firefox (and others) It says that it is undefined, but it is not I put the -> libraries = places OK I am creating an instance of it -> service = new google.maps.places.PlacesService(map); OK And I do the search -> service.nearbySearch(request, handleSearchResults); OK Does anybody knows why am I getting this error? Thanks.
I don't work at the university anymore and I don't have time to update the content unfortunately but you can find lots of great resources online for all this stuff.
hey i am working on google maps eta,so i wanted to know how can i store the javascript variable in a database. i am sending u one file ,i want to store source_address, destination_address,the alternative routes,and the duration and distance of all the alternative routes.. here's my file html>
body { font-family: Arial; font-size: 10pt; }
var source, destination; var directionsDisplay; // The whole map rendering or displaying. var directionsService = new google.maps.DirectionsService(); // For Availing the Direction Services provided by APIs google.maps.event.addDomListener(window, 'load', function () { // This acts as a pageload Function new google.maps.places.SearchBox(document.getElementById('txtSource')); new google.maps.places.SearchBox(document.getElementById('txtDestination')); directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true }); }); function GetRoute() { var kolkata = new google.maps.LatLng(22.7383075, 88.454424); // Center of the Map var mapOptions = { // Setting the View of the Map zoom: 7, center: kolkata }; map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); // Variable for map view directionsDisplay.setMap(map); // Map view directionsDisplay.setPanel(document.getElementById('dvPanel')); //Panel View //------------------------------DIRECTIONS AND ROUTE------------------------------------------------------ source = document.getElementById("txtSource").value; destination = document.getElementById("txtDestination").value; var request = { // DirectionsService origin: source, destination: destination, provideRouteAlternatives: true, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function (response, status) { // RouteService if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); //-----------------------------DISTANCE AND DURATION---------------------------------------------------- var service = new google.maps.DistanceMatrixService(); // Different Services Provided by APIs service.getDistanceMatrix({ origins: [source], destinations: [destination], travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC, avoidHighways: false, avoidTolls: false }, function (response, status) { if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") { var distance = response.rows[0].elements[0].distance.text; // Distance Calculation From data provide by APIs var duration = response.rows[0].elements[0].duration.text; // Duration Calculation From data provide by APIs var dvDistance = document.getElementById("dvDistance"); // This Variable is for Fetching the Routes distance and displaying it on web page. dvDistance.innerHTML = ""; dvDistance.innerHTML += "Distance: " + distance + ""; dvDistance.innerHTML += "Duration:" + duration; } else { alert("Unable to find the distance via road."); } }); } $.ajax({ url: 'database.php', // point to server-side PHP script cache: false, contentType: false, processData: false, data: {destination: destination, source: source, duration: duration ,distance: distance ,map_id: map_id ,sug_route1: sug_route1 ,sug_route2: sug_route2 ,sug_route3: sug_route3}, // here you'll put all the variables you want to put in the database type: 'post', success: function(data){ console.log(data); // display response from the PHP script, if any } });
Thanks for the tutorial. Had the maps up and working and then they disappeared. Went through your video step by step and found the newly needed piece of code that I was missing. Really minor, but it still kept it from working ('#map_canvas { height: 690PX; }') Thanks again
Thanks for all your feedback. Sorry I haven't checked back here in a while to answer questions. I have added a link to the example code in the video description for those who would like it.
Should be working again now. My apologies.
Dave Wallace Thanks so much for your help. :)
+Dave Wallace This was pretty cool and simple to follow. Got me a good idea what to expect when developing with the API. Thank you!
+Dave Wallace hey im having trouble with it. What would i change if i wish for it to look for something else the code that you put was different from the one in the video so its confusing
thanks sir for awsome tutorial but Weather API is not working plz help
One of the best tuts I've come across!
Brilliantly Demonstrated, answering each question that comes to mind.
Thanks alot man.
Wonderful demonstration of the API, Dave! Highly useful and inspiring. Thanks for this!
Example code is not available in the link that you gave!
Big thank you. I think you're one of many youtuber teacher that provide the file.;
This is pretty much what I needed... But what about if I want to only populate the map with address from SQL Database?
Thanks man, helped a 17 year old kid with his A level
Great tutorial Bruh!! You provide alot of value keep doing it!!
Great Tutorial Dave. Nice Job!
Love your work Dave. along with the Aussie accent :)
Very usefull, thanks! Obrigado.
awesome vid mate. Thanks for making it.
Wonderful tutorial. Appreciate your effort.
Dave, great tutorial! Thank you. Where can I find the example code? The link is not working. Thanks!
Dave….thanks solo much for this tutorial. It is great and everything was working fine until 41:10 in the video. My markers are not being placed on the map. I can get the results[i].geometry.location to appear in the console log and even alert the coordinates for results[i].geometry.location but no markers.I have viewed the code line by line and I cannot see my error. Is it possible to post the code from this video. I saw the code that was posted in the comments but it is different than what is in the video.
Is anyone else having this issue?
Thanks again
Great stuff Dave bravo
you helped me so much.
huge thanks to you!
Thanks Man, it helped a lot to map my data on google maps. :)
This is AMAZING! Thank you SO much! Great tutorial!
Thanks for posting - great tutorial!
This is an awesome overview. Very helpful! any chance of reposting an updated link. The example code link is a broken link. Thanks.
Thank You so much this video is amazing, very helpful !!!!
How can I share my location with the public via a web interface?
What if your location is from your database phpmyadmin? The input is only the Name of the place and not the long and lat
Your a legend mate!!!
Thanks so much for the tutorial, this is absolutely rock hard awesome :D
Very helpful, thank you. :)
dave, how about if i wanna mark the company name? at least 10 different company names.
please answer. tq dave
i did any thing but your code doesnot find my place only default page u.s showing??
why any help
Link for the code isn't working. Could you please help?
Thanks mate for this awesome tutorial... Made me look good (saved my arse!)
Dave, are indoor maps possible on javascript? zooming in to the map in my html5 website im not able to get the floor plan..
I haven't really looked into this, but I imagine if the map itself supports indoor maps then there's no reason why it shouldn't show up on the Javascript API. It may just be that it is a new feature and isn't yet working everywhere.
Hi great video!
Do you know of a way to extract the traffic data from google maps traffic layer using the api? I want this for just a small location not for everywhere.
Hey Dave, for me all the codes seem the be working, as observed on the console, but the map itself never gets displayed and I'm not sure why.
Highly appreciate this video, very helpful in understanding google api. Any chance you will do more?
Also what if i wanted to toggle a marker, how could i change the code to do that????
hello Dave..
how can i access google map turn by turn commands(Android mobile) with my microcontroller..
Excellent explanation. Thank you for this very helpful tutorial.
Have you done a video demostration on how to create reviews for a website?. I'd love to be able to have google reviews using javascript. Please let me know the link if you have done it already.
Thanks
Thanks this really helped
What do I have to do?
this is awesome - thanks!
does anyone know how possibly to have a search implemented into the app that can use Google maps to check locations? like stores, parks, etc.
I need it too! Could you tell me if you had any lucky finding it? Thanks.
Awesome tutorial... really informative.... Thanks :)
Dave, great tutorial, easy to follow and well explained as you went.
I managed to get it all working with the help of the download, but I was wondering if you could help an old ex Brissy boy with an extension to that.
I am an amateur webmaster looking after a club website I built and I would like to create a "Personalised Directions" page to our next club run, instead of the one size fits all, fixed directions I currently create with Google maps and imbed in the site.
So in a nutshell I want to use the Directions Service to add a destination and a suggested route, the destination will always be a LngLat coordinate.
Can you help me with this please, it is doing my 57 yr old head in trying to make it work.
Many Thanks in Advance.
Paul Cade
hello, the download don't have all code... is posible download all?
the google map did't show on my chorome using this code why (i have no error) help
Dave do you have a linkedin profile?
how can i get the files you were coding
Awesome video! It would be cool if you could lets say the user wants to save an address that is saved in the database and then display the address on the users show page with a marker on the googlemaps api of that particular address the user inputed. Somehow need to access the information the user inputed in the database and then geocode that into lat and longitude.. i guess? what do you think?
Good should use this video on there help page instead of these endless codes, lines and links...
Thank you, well done.
The reason why the current location is off because it gets the IP exchange location of that area.
the link to download the code does not work
Any chance you could post these examples for download?
Dave, Thank you very much for this awesome post. I`m new to this and i must say i have learnt a lot already because of this video. I cant seem to find the link to code. I can share with me pls?????????????? Thnxxxx
so can i use this to change my time line
Can you make a taxi booking application(like uber) using this ?
very helpful, thanks
THANKS VERY VERY MUCH.....
TypeError: google.maps.places is undefined at Mozila Firefox (and others)
It says that it is undefined, but it is not
I put the -> libraries = places OK
I am creating an instance of it -> service = new google.maps.places.PlacesService(map); OK
And I do the search -> service.nearbySearch(request, handleSearchResults); OK
Does anybody knows why am I getting this error?
Thanks.
Thank you so much
any one please tell me how to show two persons in google map while they having same latLng positions?
Is this tutor still working in 2016?
I don't work at the university anymore and I don't have time to update the content unfortunately but you can find lots of great resources online for all this stuff.
If you have the code on somewhere please inform me. Thanks for this useful video
Hi, I just added a link to the code in the video description. Thanks
Hi, could you help me with jointjs, i found your comments on google groups ? Thnx
Hi, how can I help you?
Thanks, i already done)
thank you so much, its very interresting , just i need to write a results in html code if it possible to give me how we can do this.
I want the source code for a train navigation
thanks
Depois vou analisá-lo.
Thanks sir
your code is gone
This got recommended after 9 years?? Early stages of google maps..
thx
can I ask for a source code of your tutorial, it really helps for my project right now. thank you. god bless
hey i am working on google maps eta,so i wanted to know how can i store the javascript variable in a database.
i am sending u one file ,i want to store source_address, destination_address,the alternative routes,and the duration and distance of all the alternative routes.. here's my file
html>
body
{
font-family: Arial;
font-size: 10pt;
}
var source, destination;
var directionsDisplay; // The whole map rendering or displaying.
var directionsService = new google.maps.DirectionsService(); // For Availing the Direction Services provided by APIs
google.maps.event.addDomListener(window, 'load', function () { // This acts as a pageload Function
new google.maps.places.SearchBox(document.getElementById('txtSource'));
new google.maps.places.SearchBox(document.getElementById('txtDestination'));
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
});
function GetRoute() {
var kolkata = new google.maps.LatLng(22.7383075, 88.454424); // Center of the Map
var mapOptions = { // Setting the View of the Map
zoom: 7,
center: kolkata
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); // Variable for map view
directionsDisplay.setMap(map); // Map view
directionsDisplay.setPanel(document.getElementById('dvPanel')); //Panel View
//------------------------------DIRECTIONS AND ROUTE------------------------------------------------------
source = document.getElementById("txtSource").value;
destination = document.getElementById("txtDestination").value;
var request = { // DirectionsService
origin: source,
destination: destination,
provideRouteAlternatives: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) { // RouteService
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
//-----------------------------DISTANCE AND DURATION----------------------------------------------------
var service = new google.maps.DistanceMatrixService(); // Different Services Provided by APIs
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
var distance = response.rows[0].elements[0].distance.text; // Distance Calculation From data provide by APIs
var duration = response.rows[0].elements[0].duration.text; // Duration Calculation From data provide by APIs
var dvDistance = document.getElementById("dvDistance"); // This Variable is for Fetching the Routes distance and displaying it on web page.
dvDistance.innerHTML = "";
dvDistance.innerHTML += "Distance: " + distance + "";
dvDistance.innerHTML += "Duration:" + duration;
} else {
alert("Unable to find the distance via road.");
}
});
}
$.ajax({
url: 'database.php', // point to server-side PHP script
cache: false,
contentType: false,
processData: false,
data: {destination: destination, source: source, duration: duration ,distance: distance ,map_id: map_id ,sug_route1: sug_route1 ,sug_route2: sug_route2 ,sug_route3: sug_route3}, // here you'll put all the variables you want to put in the database
type: 'post',
success: function(data){
console.log(data); // display response from the PHP script, if any
}
});
Source:
Destination:
Thanks for the tutorial. Had the maps up and working and then they disappeared. Went through your video step by step and found the newly needed piece of code that I was missing.
Really minor, but it still kept it from working ('#map_canvas { height: 690PX; }')
Thanks again
heloo dave wallace and thank you for your videos i'm not good at english but can you send me the code plz ,,,,,,,,,,,,,,,?
hey guys plzz try to help me in my problem.. thanks in advance
down load HTML where.. Good n simple...
Hi, I have added a link to the video description. Thanks
Are you using a trackpad? lol
you helped me so much.
huge thanks to you!
thank u so much