I using Google map API v3 to draw routes. But for some path the route is not plotted in the map. so I write a callback function. But it dose not working, my code is
function putRoute(request,color,callback)
{
var color = color;
var request = request;
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var polylineOptionsActual = {
strokeColor :color,
strokeOpacity: 1.0,
strokeWeight : 5,
};
var directionsRenderer = new google.maps.DirectionsRenderer;
directionsRenderer.setMap(map);
directionsRenderer.setOptions( { polylineOptions: polylineOptionsActual, suppressMarkers: true} );
directionsRenderer.setDirections(response);
}
});
if (typeof callback === "function") {
callback(request,color);
}
}
putRoute(request,color,function() {
});
try renaming the function putRoute to
function putRoute(request,color){}
I guess this condition is not true:
if (typeof callback === "function") {
I'd change that to
if (typeof callback != "undefined") {
Atleast, I do know that this last code is working.
You can also try this one:
if (callback instanceof Function) {
// do stuff;
}
Your callback routine is in the wrong place. It needs to be inside the callback function for the DirectionsService:
function putRoute(request,color,callback)
{
var color = color;
var request = request;
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var polylineOptionsActual = {
strokeColor :color,
strokeOpacity: 1.0,
strokeWeight : 5,
};
var directionsRenderer = new google.maps.DirectionsRenderer;
directionsRenderer.setMap(map);
directionsRenderer.setOptions( { polylineOptions: polylineOptionsActual, suppressMarkers: true} );
directionsRenderer.setDirections(response);
// only execute callback on success
if (typeof callback === "function") {
callback(request,color);
}
} else {
alert("Directions request failed:" + status);
}
});
}
I had the same problem when I was defining callback as:
function callback() {
...
}
then I changed it to:
callback = function() {
...
}
and everything worked! hope it helps ;)
Related
I'm calling a chain of functions through one click function, like below (simplified from my actual code). The problem is, initMap() is running before the user clicks the <button>, throwing an error, because the latitude/longitude are not defined until the user inputs an address through the click() function.
How can I prevent initMap() from running before the click() function?
$("button").click(function() {
var user_search = $("input").val();
var url = "https://api.mapbox.com/geocoding/v5/mapbox.places/" + user_search + ".json?access_token=MYAPIKEY";
$.getJSON(url, function(data) {
var number = data.features[0].address;
var route = data.features[0].text;
var latitude = data.features[0].geometry.coordinates[1];
var longitude = data.features[0].geometry.coordinates[0];
initMap(latitude, longitude);
});
});
var map;
var infowindow;
// Create Google Map with location at center
function initMap(latitude, longitude) {
var location = {lat: latitude, lng: longitude};
console.log(location);
map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 15
});
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: location,
radius: 3200,
types: ['school']
}, callback);
}
// List nearby places
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
listPlaces(results[i]);
}
}
else {
alert("There was an error finding address data.")
}
}
// ONLY list places with characteristics below
function listPlaces(place) {
if (place.name.indexOf('High ') > -1 && place.name.indexOf('Junior') == -1) {
$('body').append('<br>' + place.name);
}
}
ur initMap function is not getting closed properly.the error is because of syntax error not because of initMap() running without button click
$("button").click(function() {
initMap(latitude, longitude);
});
function initMap(latitude, longitude) {
//do stuff
callback();
}
function callback(results, status) {
//do stuff
}
function listPlaces(place) {
//do more stuff
}
Did this is the real code you want?
$("button").click(function() {
initMap(latitude, longitude);
});
function initMap(latitude, longitude) {
//do stuff
}
function callback(results, status) {
//do stuff
}
function listPlaces(place) {
//do more stuff
}
There is the following Angular code:
$scope.clickByPoint = function(marker, eventName, point) {
var geocoder, location;
$scope.options.info.point = point;
$scope.options.info.show = true;
$scope.searched = false;
$scope.address = "";
geocoder = new google.maps.Geocoder();
location = {
lat: parseFloat(point.latitude),
lng: parseFloat(point.longitude)
};
geocoder.geocode({location: location}, function(results, status) {
$scope.searched = true;
if (status === google.maps.GeocoderStatus.OK) {
$scope.address = results[0].formatted_address;
}
$scope.$digest();
});
};
And my Jasmine test:
describe('$scope.clickByPoint', function() {
var point;
beforeEach(inject(function(_Point_) {
point = _Point_.build('PointName', { latitude: 0, longitude: 0 });
}));
describe('try to find the address', function() {
it('initialize google maps info window', function() {
$scope.clickByPoint(null, null, point)
expect($scope.searched).toEqual(true);
});
})
});
As you can see I'm trying to test 'scope.searched' variable is changed, but it's always 'false', because function is asynchronous. How can I test this code properly? Thanks in advance.
In this case, use a mock of google.maps.Geocoder() in test, using jasmine, because, you are testing clickByPoint() logic and not Google maps api.
var geocoder = new google.maps.Geocoder();
jasmine.createSpy("geocode() geocoder").andCallFake(function(location, callback) {
// no wait time ...
var results = {fake:'', data:''};
var status = google.maps.GeocoderStatus.OK; // get OK value and set it OR redefine it with a Spy.
callback(result, status);
});
Now you can use your test :
describe('try to find the address', function() {
it('initialize google maps info window', function() {
$scope.clickByPoint(null, null, point);
expect($scope.searched).toEqual(true);
});
})
I created a small test project in here: http://jsfiddle.net/jochenhebbrecht/k3a3fvq0/3/
I clean routes using the following method:
// Clean previous routes
if (directionsDisplays.length > 0) {
for(var i = 0; i < directionsDisplays.length; i++) {
directionsDisplays[i].setMap(null);
}
directionsDisplays.length = 0;
}
I draw routes using the follow method:
// Draw all routes
if (routes.length > 0) {
for (var i = 0; i < routes.length; i++) {
(function(i){
var route = routes[i];
var request = {
origin: route.origin,
destination: route.destination,
travelMode: google.maps.TravelMode.WALKING,
waypoints: route.waypoints
};
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
preserveViewport: true,
polylineOptions: {
strokeColor: '#C6D300'
}
});
directionsDisplay.setMap(map);
directionsDisplays.push(directionsDisplay);
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
})(i);
}
}
I have a checkbox which show some routes on a map. If you check the box, routes are shown. If you uncheck the box, routes are removed.
However, if I check the box again (for a second time), not all routes are rendered correctly. You have to check/uncheck a couple of times to let it work ...
Any idea what I'm doing wrong?
Check the status returned by your directions requests. If they fail due to OVER_QUERY_LIMIT, delay a short while and retry the failed requests.
Also, don't request the routes every time they are displayed, if they are already available redisplay the route.
Note that the approach above will only work for the same order of magnitude of routes you currently have, if you have a lot more routes it will be prohibitively slow.
proof of concept fiddle
function highlightRoutes() {
if (directionsDisplays.length > 0 && (directionsDisplays[0].getMap() == null)) {
// redisplay the routes
for (var i = 0; i < directionsDisplays.length; i++) {
directionsDisplays[i].setMap(map);
}
} else if (directionsDisplays.length > 0 && (directionsDisplays[0].getMap() != null)) {
// hide the routes
for (var i = 0; i < directionsDisplays.length; i++) {
directionsDisplays[i].setMap(null);
}
} else {
var routes = new Array();
if (jQuery('#chkBxBikeRoutes').attr('checked')) {
routes.push.apply(routes, getBikeRoutes());
}
// Clean previous routes
if (directionsDisplays.length > 0) {
for (var i = 0; i < directionsDisplays.length; i++) {
directionsDisplays[i].setMap(null);
}
directionsDisplays.length = 0;
}
// Draw all routes
if (routes.length > 0) {
for (var i = 0; i < routes.length; i++) {
(function(i) {
var route = routes[i];
var request = {
origin: route.origin,
destination: route.destination,
travelMode: google.maps.TravelMode.WALKING,
waypoints: route.waypoints
};
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
preserveViewport: true,
polylineOptions: {
strokeColor: '#C6D300'
}
});
directionsDisplay.setMap(map);
directionsDisplays.push(directionsDisplay);
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
} else if (status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT) {
//document.getElementById("status").innerHTML += request.origin+":"+request.destination+"status:"+status+"<br>";
setTimeout(function() {
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
} else {
document.getElementById("status").innerHTML += request.origin + ":" + request.destination + "status:" + status + "<br>";
}
})
}, 2000);
} else {
document.getElementById("status").innerHTML += request.origin + ":" + request.destination + "status:" + status + "<br>";
}
});
})(i);
}
}
}
}
Unfortunately you cannot do that.
Update your code as shown below and you will see what happens:
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
} else {
alert(status);
}
You will get several OVER_QUERY_LIMIT status messages.
More information can be found here:
https://developers.google.com/maps/documentation/business/articles/usage_limits
https://developers.google.com/maps/documentation/javascript/directions#DirectionsStatus
I'm trying to return the variable coord from GetLocation, but it only returns undefined.
Any help appreciated!
var coord = "";
function GetLocation(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { "address": address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
coord = ParseLocation(results[0].geometry.location);
// This alert shows the proper coordinates
alert(coord);
}
else{ }
});
// this alert is undefined
alert(coord);
return coord;
}
function ParseLocation(location) {
var lat = location.lat().toString().substr(0, 12);
var lng = location.lng().toString().substr(0, 12);
return lat+","+lng;
}
When you are returning coords from the outer function it is still in fact undefined. The inner function executes later when the asynchronous operation (if it wasn't asynchronous, the API would just give the result to you normally) is done.
Try passing a callback:
function GetLocation(address, cb) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { "address": address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
cb(ParseLocation(results[0].geometry.location));
}
else{ }
});
}
You can then use it like so:
GetLocation( "asd", function(coord){
alert(coord);
});
I'm writing some code with the Google Maps API, it works fine in all browsers (FF, IE9, Chrome) but IE8 or below, I have assigned the map to a global variable called Map, which gets populated but when the addMarker function gets called the Map global is null in IE8, but the addMarker function does work when I call it from the locator function, I have included all these functions below.
var GoogleMaps = {};
var Map = null;
var init = (function () {
"use strict";
var MapType = null;
var ZoomLevel = null;
var ControlPos = null;
var ControlSize = null;
var myLatLong = null;
var Geocoder;
var result = null;
GoogleMaps.setup = function (options) {
myLatLong = new google.maps.LatLng(24.886436490787712, -70.26855468754);
if (google.loader.ClientLocation) {
myLatLong = new google.maps.LatLng(
google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude);
} else if (options.Lat !== null && options.Long !== null) {
options.Location = new google.maps.LatLng(options.Lat, options.Long);
} else {
// Else centre to UK
options.Location = new google.maps.LatLng(52.961875, -1.419433);
}
if (options.MapType.toUpperCase() === 'ROADMAP') {
MapType = google.maps.MapTypeId.ROADMAP;
} else if (options.MapType.toUpperCase() === 'TERRAIN') {
MapType = google.maps.MapTypeId.TERRAIN;
} else if (options.MapType.toUpperCase() === 'HYBRID') {
MapType = google.maps.MapTypeId.HYBRID;
} else {
MapType = google.maps.MapTypeId.SATELLITE;
}
// Check zoom level, if not set then set to zoom level 8.
if (options.ZoomLevel) {
ZoomLevel = options.ZoomLevel;
} else {
ZoomLevel = 8;
}
var mapOptions = {
center: myLatLong,
zoom: ZoomLevel,
mapTypeId: MapType
};
var mapDiv = document.getElementById('canvas');
// Map gets initiated here
window.Map = new google.maps.Map(mapDiv, mapOptions);
delete options.MapType;
delete options.Lat;
delete options.Long;
delete options.ZoomLevel;
};
GoogleMaps.addMarker = function (options) {
var Location = null;
var Animation = null;
var Title = null;
var Draggable = null;
var Content = null;
var InfoWindow = null;
var Flat = null;
var Clickable = null;
if (options.lat !== null && options.long !== null) {
Location = new google.maps.LatLng(options.lat, options.long);
;
} else {
Location = myLatLong;
}
if (typeof(options.position) !== "undefined") {
Location = options.position;
}
if (options.animation.toUpperCase() === 'BOUNCE') {
Animation = google.maps.Animation.BOUNCE;
} else if (options.animation.toUpperCase() === 'DROP') {
Animation = google.maps.Animation.DROP;
} else {
Animation = google.maps.Animation.NONE;
}
if (options.draggable !== null && options.draggable === 'true') {
Draggable = true;
} else {
Draggable = false;
}
if (options.title !== null) {
Title = options.title;
} else {
Title = null;
}
if (options.content !== null) {
Content = options.content;
InfoWindow = new google.maps.InfoWindow({
content: Content
});
}
if (options.flat !== null && options.flat === 'true') {
Flat = true;
} else {
Flat = false;
}
if (options.clickable !== null && options.clickable === 'true') {
Clickable = true;
} else {
Clickable = false;
}
// Gets used in this section
var Marker = new google.maps.Marker({
position: Location,
map: window.Map,
animation: Animation,
draggable: Draggable,
title: Title,
flat: Flat,
clickable: Clickable,
zIndex: 1
});
// and sets map here
Marker.setMap(window.Map);
if (options.content !== null) {
google.maps.event.addListener(Marker, 'click', function (e) {
InfoWindow.open(window.Map, this);
google.maps.event.addListener(window.Map, 'click', function (e) {
InfoWindow.close(window.Map, window.Marker);
});
});
}
google.maps.event.addListener(Marker, 'dragend', function (e) {
});
delete options.lat;
delete options.long;
delete options.animation;
delete options.title;
delete options.content;
delete options.flat;
delete options.draggable;
delete options.clickable;
};
GoogleMaps.Locator = function (result) {
var address = null;
Geocoder = new google.maps.Geocoder();
address = result;
Geocoder.geocode({ 'address': address }, function (response, status) {
if (status === google.maps.GeocoderStatus.OK) {
window.Map.setCenter(response[0].geometry.location);
var Location = new google.maps.LatLng(response[0].geometry.location.Xa, response[0].geometry.location.Ya);
var markerOptions = {
animation: "drop",
draggable: "true",
content: 'Hello World!',
title: "Hello",
position: Location
};
GoogleMaps.addMarker(markerOptions);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
};
Below is how I am calling the functions:
var markerOptions = {
lat: 52.48278,
long: -0.892089,
animation: "drop",
draggable: "true",
content: 'Hello World!',
title: "Click Me"
};
google.maps.event.addDomListener(window, 'load', function () { GoogleMaps.setMarker(markerOptions) });
google.maps.event.addDomListener(window, 'load', function () { GoogleMaps.Locator('London') });
Thanks for any help.
I resolved the problem like this.
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7; IE=EmulateIE9″/>
Try changing this line in your setup
window.Map = new google.maps.Map(mapDiv, mapOptions);
to just
Map = new google.maps.Map(mapDiv, mapOptions);
This way you accessing the global variable declared.
when is GoogleMaps.setup called? Right now it looks like depending on the browser it can be called after functions attached by
google.maps.event.addDomListener(window, 'load', function () { ... });
and that's why map is not set when you call addMarker, but is already initialized when you receive callback from
Geocoder.geocode(...)
To fix this make sure that GoogleMaps.setup is called before addMarker.
IE8 has always meant trouble. :-) Try adding the following meta tag at the beginning of your <head> section:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Description here:
http://blogs.msdn.com/b/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx