Develop Reference

'Google is not defined' when I add directionsDisplay and Service

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.

Google Maps Javascript API, Direction Update with Geolocation Move

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.

Google Maps resize css display none

This question has been asked many times here, and that is that Google Maps display partially. My problem is: I use waypoints to trigger CSS3 animations on my page. On the page with Google Maps I have set the CSS to display: none; until the waypoint is hit. This causes Google Maps to break.
From my research and a search done on Stack Overflow, the fix is this (correct me if I am wrong):
google.maps.event.trigger(map, 'resize');
Here is my JavaScript code that I have gotten from another developer online, I have no idea where to put the Google Maps resize trigger?:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var latlng = new google.maps.LatLng(-33.8333406,18.6470022);
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Get Directions"
});
}
function calcRoute() {
var start = document.getElementById("routeStart").value;
var end = "-33.8333406,18.6470022";
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);
} else {
if (status == 'ZERO_RESULTS') {
alert('No route could be found between the origin and destination.');
} else if (status == 'UNKNOWN_ERROR') {
alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');
} else if (status == 'REQUEST_DENIED') {
alert('This webpage is not allowed to use the directions service.');
} else if (status == 'OVER_QUERY_LIMIT') {
alert('The webpage has gone over the requests limit in too short a period of time.');
} else if (status == 'NOT_FOUND') {
alert('At least one of the origin, destination, or waypoints could not be geocoded.');
} else if (status == 'INVALID_REQUEST') {
alert('The DirectionsRequest provided was invalid.');
} else {
alert("There was an unknown error in your request. Requeststatus: \n\n"+status);
}
}
});
}
Here is waypoints jquery code that triggers display: block
// Studio Page
jQuery('.studio-page').waypoint(function() {
jQuery('.kickass-studio').addClass( 'show animated bounceInLeft' );
jQuery('.location').addClass( 'show animated bounceInRight' );
jQuery('.geo-address').addClass( 'show animated bounceInDown' );
},
{
offset: '10%'
});

Just add it at the end of initialize function....
Also you need to save the map object in a variable and call the resize event again when you make the css of the google maps to display: block with this map object

resize google maps not working and takes long time

At first, my problem was that the google maps with direction service was not loading correctly. After some researches, i find google.maps.event.trigger(map, 'resize'). Ok, now it works. Kinda.
The order of my app is: page x, page A with the map and the direction, page y, page B with the map and the direction.
My script is:
function initialize(mapa_id) {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 17,
mapTypeControl: false,
zoomControl: false,
draggable: false,
center: new google.maps.LatLng(-23.583693,-48.042186),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(mapa_id), mapOptions);
google.maps.event.trigger(map, 'resize');
directionsDisplay.setMap(map);
if(mapa_id == 'map-canvas'){
navigator.geolocation.getCurrentPosition(rotaInicial, onError, options);
}else{
directionsDisplay.setMap(map);
navigator.geolocation.getCurrentPosition(rotaFinal, onError, options);
}
}
function rotaInicial(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var start = new google.maps.LatLng(latitude,longitude);
var end = new google.maps.LatLng(-23.578659,-48.038045);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
google.maps.event.trigger(map, 'resize');
directionsDisplay.setDirections(response);
}
});
}
function rotaFinal() {
var start = new google.maps.LatLng(-23.578659,-48.038045);
var end = new google.maps.LatLng(-23.585503,-48.038324);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
google.maps.event.trigger(map, 'resize');
directionsDisplay.setDirections(response);
}
});
}
So, what happens now: the page A loads the map first (correctly and with no directions) and then after a few seconds (5 - 8) the 'resize' happens and it shows the directions. Then it goes to page y, after click the button it goes to the page B and the map appears only on the top left. After a few seconds again, the 'resize' happens and show the directions. when i do this routine again (back to page x), the first map loads also in top left and it happens all those things.
I have two problems.
When the page loads, i want to show the map already with directions.
If is not possible ok, but at least it should load the map correctly. And this resize should work faster.
I'm not sure if i put the 'resize' code in the right place. Any ideas?

you call both functions that will draw the route(rotaInicial & rotaIFinal) in the success-callback of navigator.geolocation.getCurrentPosition . getCurrentPosition will be executed asynchronously and it may take some time till you get a result.
Therefore, as long as you need to set the direction based on the users location, there isn't anything you can do to speed-up the drawing of the directions.

Google maps v3: adding a new map when function 'failure' called

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.