On the contact page of my site two things can happen:
The user has geolocation enabled, and a map (map-canvas) will display a route from their location to a predefined location dest. This feature works fine.
The user doesn't have geolocation enabled or chooses not to allow it. An alert will show (works fine), and some text will be added to the directions-panel (works fine). The third thing I want to happen in this scenario is a new map be added to map-canvas that is centred on dest, this feature doesn't seem to be working and I can't figure out why.
Code below should give a good representation of the above:
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var dest = "Unit 20, Tallaght Business Centre, Whitestown Road, Tallaght Business Park, Ireland";//53.282882, -6.383155
var ourLocation = {lat : 53.282882, lng : -6.383155}//centre attribute of the map must be a LatLng object and not hardcoded as above
function initGeolocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition( success, failure );
}
}
//create a new map centered on user's location, display route and show directions
function success(position) {
directionsDisplay = new google.maps.DirectionsRenderer();
coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions-panel"));
calcRoute();
}
//calculate the route from user's location to 'dest'
function calcRoute() {
var start = coords;
var end = dest;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
//tell user geoloc isn't enabled and just plot 'ourLocation' on 'map-canvas'
function failure() {
alert("Your browser does not have geolocation enabled so we can't give you directions to our office. Enable geolocation and try again, or consult the map for our address.");
$("#directions-error-message").css({
visibility: 'visible'
});
var destMapOptions = {
zoom:13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(ourLocation.lat, ourLocation.lng)
}
map = new google.maps.Map(document.getElementById("map-canvas"), destMapOptions);
}
</script>
Anyone have any ideas why this isn't working? All help appreaciated.
EDIT: Working version above
You need to pass the map a LatLng object for it's centre, not an address. You will need to use Googles LocalSearch services to make that work.
var dest = {
lat : 53.282882,
lng : -6.383155
}
var destMapOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(dest.lat,dest.lng)
}
Also, as you have map declared as a var already maybe use that rather than a function scoped variable for the map.
The center attribute of the map options must be a LatLng object. You've got it hardcoded as an address string.
Related
My map was working perfectly displaying a fixed marker, and a marker of the user's shared location. However now when I add directionsDisplay and directionsService variables along with some other code, the map doesn't load at all and I get a console error of 'google is not defined'.
Below I will post my working code, and I'll annotate all the the new lines which I added so you can tell which ones.
If I comment out the lines (as below) the map works fine and displays the console error directionsDisplay not defined, which I would expect obviously but when I add these lines in google hates me.
Also I've currently tried:
removing async defer from the api key
testing in Chrome and FF, with incognito mode and private browsing
EDIT
Thanks to #Jaromanda X, who noticed google wont be recognized until the initMap function is called so I moved the variable into calcRoute function as it didn't need to be global anyway.
I will update the code, please note that this unfortunatley doesn't make the route calculate correctly, still working on that :/
HTML:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=my key is here&callback=initMap"></script>
JS:
var directionsDisplay;
var map;
var markers = [];
var initMap = function() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chesters = new google.maps.LatLng(52.19147365, -2.21880075);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: chesters
});
var marker = new google.maps.Marker({
position: chesters,
title: 'Chesters Restaurant',
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
map: map
});
markers.push(marker);
directionsDisplay.setMap(map);
}
var showPosition = function(position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({
position: userLatLng,
title: 'Your Location',
draggable: true,
map: map
});
markers.push(marker);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].getPosition());
}
map.fitBounds(bounds);
calcRoute(userLatLng);
}
function calcRoute(userLatLng) {
var directionsService = new google.maps.DirectionsService();
var start = new google.maps.LatLng(userLatLng.lat, userLatLng.long),
end = new google.maps.LatLng(52.19147365, -2.21880075);
/*bounds.extend(start);
bounds.extend(end);
map.fitBounds(bounds);*/
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == 'OK') {
directionsDisplay.setDirections(result);
}
});
}
function errorHandler(error) {
console.log('Geolocation error : code ' + error.code + ' - ' + error.message);
}
navigator.geolocation.getCurrentPosition(showPosition, errorHandler, {
enableHighAccuracy: false,
maximumAge: 60000,
timeout: 27000
});
Have you enabled the google maps directions api? https://developers.google.com/maps/documentation/javascript/directions
I would have posted as a comment but apparently cant do that before 50rep.
I'm trying to create a transit map (with bus/metro indications) using Google Maps, but when I create the "start" and "end" markers from inputs (with autocomplete addresses), there's no way to drag any marker despite set drag option as true.
Changing the travelMode option to google.maps.TravelMode.DRIVING the draggin' is enabled. And going back this property to google.maps.TravelMode.TRANSIT the daggin' goes back to disabled.
There's a way to solve this issue?
Code:
var directionsService;
var directionsDisplay;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: -32.89, lng: -68.845} // Mendoza.
});
directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
panel: document.getElementById('right-panel')
});
directionsDisplay.addListener('directions_changed', function() {
var addresses = directionsDisplay.getDirections().routes[0].legs[0];
document.getElementById('from').value = addresses.start_address;
document.getElementById('to').value = addresses.end_address;
});
google.maps.event.addDomListener(document.getElementById('go'), 'click', displayRoute);
var input_from = document.getElementById('from');
var autocomplete = new google.maps.places.Autocomplete(input_from);
autocomplete.bindTo('bounds', map);
var input_to = document.getElementById('to');
var autocomplete = new google.maps.places.Autocomplete(input_to);
autocomplete.bindTo('bounds', map);
displayRoute();
}
function displayRoute() {
directionsService.route({
origin: document.getElementById('from').value,
destination: document.getElementById('to').value,
//travelMode: google.maps.TravelMode.DRIVING,
travelMode: google.maps.TravelMode.TRANSIT
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
console.log(response);
directionsDisplay.setDirections(response);
} else {
alert('Could not display directions due to: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
Unfortunately, the "draggable" mode is not permited to the TRANSIT travel mode. Just now I'm trying to find a way and I found your question by the way.
EDIT
As the google documentation says:
Users may modify cycling, walking or driving directions displayed
using a DirectionsRenderer dynamically if they are draggable, allowing
a user to select and alter routes by clicking and dragging the
resulting paths on the map. You indicate whether a renderer's display
allows draggable directions by setting its draggable property to true.
Transit directions cannot be made draggable.
Check it here: https://developers.google.com/maps/documentation/javascript/directions#TransitOptions
We will have to find another way... if I find it I'll make you know, if you find it first I'll be grateful if you told me.
The "solution" (hack) I found, using trial and error, is to prevent to show the markers the API creates:
var directionsDisplay = new m.DirectionsRenderer({
suppressMarkers: true, // Supressing the default markers
map: map,
// another options...
});
And implement my own function to show markers:
function placeMarker(e, t) {
t < 2 && (markers[t] = new m.Marker({
position: e,
draggable: true, // YES! It's draggable!
map: map
}), m.event.addListener(markers[t], "dragend", function() {
geocodePosition(markers[t].getPosition(), t);
}), markers[t].setVisible(true), geocodePosition(markers[t].getPosition(), t), arrangeBounds());
}
Then, the markers are draggable using a Google transit map... The solution is late but, I hope, not least.
I created simple app that, get users current position and the destination and set direction through the google map javascript api.
Sample code:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(document.getElementById('maps'),
mapOptions);
directionsDisplay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
var lat = position.coords.latitude; //get the current position
var lon = position.coords.longitude;
var request = {
origin: new google.maps.LatLng(lat, lon), //set the position
destination: "colombo", //set the destination
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response); //set the direction in google map
}
});
Question:
Now i want to update the direction dynamically based on current location when user move the device. ( like android google maps app )
Is google api support that kind of stuff.
Is there anyway to do it without re-run the js again.
I am trying to use the google maps javascript API to map an address based on this example.
https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple
The documentation recommends the clientside javascript approach as the best way to deal with quotas on requests. So far so good. My problem is in moving from this example to my specific case. My addresses are already in a database so I don't need the user to enter one. Also I do not want the map to load with the page. Instead, I want the map for the address to load when the user clicks a link.
I have a script working that loads the map in a div using initialize (). But my problem is getting initialize to work with geocode. The geocode in the example depends on initialize loading with bodyonload which I do not want.
Here is code. Would appreciate any suggestions:
javascript
var map;
var geocoder;
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.7562008,-73.9903784);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
html
<input id="address" type="hidden" value="Palo Alto CA">
View map without geocoding
<div id="map_canvas" style="width:300px; height:300px;"></div>
View map of geocoded address
The only issue I had with your script was the following line in the initialize() function:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
By declaring var map, your script is just declaring a local variable named map, as opposed to using the global map variable declared at the top of your script.
By removing var, the script uses the global variable and runs fine:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Finally, to get the geocoded map to load on the link click, change onclick for your geocoded address to onclick="initialize();codeAddress();".
Added:
Try combining your initialize() and codeAddress() methods into the following:
function initialize() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 18,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
And then just call initialize() from your link.
Basically, what we're doing is taking the call to geocoder.geocode() that codeAddress() was performing and inside the resulting delegate, we're using results[0].geometry.location to initialize the map. This way, the temporary latlong doesn't need to be displayed.
I'm creating my own styled map using Google Maps JS API. I wanted to add directions functionality to map, i followed the official tutorial (Under Displaying the DirectionsResult title), but the final route is not appearing...
I debugged my code and I found, than directionsService.route function returns google.maps.DirectionsStatus.OK and directionsDisplay.setDirections(result) is really called with no JS error... So directions are successfully computed but not showed in my map. A tried to turn off special map styling but even on default map style it is not appearing. Any ideas where could the problem be?
OK, some code...:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAB2gbXmG... ...mNs66iPr8&sensor=false&callback=directions_init"></script>
<script type="text/javascript">
var map;
var zoom = 11;
var directionsDisplay;
var directionsService;
function gmap_init(){
var styleArray = [ /*here is style but even if its commented its not working*/];
var alterMapStyle = new google.maps.StyledMapType(styleArray, {name: "ALTER style"});
var latlng = new google.maps.LatLng(/*lat, lng*/);
var myOptions = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
panControl: false,
zoomControl: false,
scaleControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById("gmap"), myOptions);
map.mapTypes.set('ALTER_style', alterMapStyle);
map.setMapTypeId('ALTER_style');
}
function directions_init(){
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
display_route();
}
function display_route(){
var request = {
origin: 'Place A',
destination:'Place B',
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//program got here without error
directionsDisplay.setDirections(result);
}
});
}
Not sure if it's the source of your problems, but it's sure worth a shot...
From your script input
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAB2gbXmG... ...mNs66iPr8&sensor=false&callback=directions_init"></script>
I assume the directions_init function is called after api script has been downloaded, which probably is before page's onload event, thus your map object has not been initiated and is null. So practically you are calling
directionsDisplay.setMap(null);
Try calling directions_init from gmap_init or on any event that is triggered after onload.