Could you lend a hand with my query? In my web page, thanks to angular js v1, there's an embedded map that:
- Enables users to input an origin and destination.
- Plots markers and showcases the route from the origin to the destination.
- Shows restaurants (as markers) for waypoints at the origin, destination, and a midpoint. This reduces overuse of Google API requests.
The Issue: The InfoWindow doesn't show up when I click on my markers. While it appears by default for the origin and destination points, I'm struggling to make it appear for all the restaurant markers. I used PlaceSearch for this purpose.
I've done extensive research online, but being new to JS/Angular, I can't find the best solution.
Below is my directive code, along with some InfoWindow snippets, but I'm stuck. I'm not sure if a click handler is necessary?
googleMap.$inject = [];
function googleMap() {
return {
restrict: 'E',
template: '<div class="google-map"></div>',
replace: true,
scope: {
center: '=',
zoom: '=',
origin: '=',
destination: '=',
travelMode: '='
},
link($scope, $element) {
const map = new google.maps.Map($element[0], {
zoom: $scope.zoom,
center: $scope.center
});
const directionsService = new google.maps.DirectionsService();
const directionsDisplay = new google.maps.DirectionsRenderer();
const placesService = new google.maps.places.PlacesService(map);
// const infoWindows = [];
// const infowindow = new google.maps.InfoWindow();
// let marker = new google.maps.Marker;
directionsDisplay.setMap(map);
$scope.$watch('center', () => map.setCenter($scope.center), true);
$scope.$watchGroup(['origin', 'destination', 'travelMode'],
displayRoute);
// DISPLAY ROUTE
function displayRoute() {
if(!$scope.origin || !$scope.destination || !$scope.travelMode)
return false;
directionsService.route({
origin: $scope.origin,
destination: $scope.destination,
travelMode: $scope.travelMode
}, (response) => {
directionsDisplay.setDirections(response);
// beginning of this form
// response.routes[0].legs[0].steps.map(step => {
const steps = response.routes[0].legs[0].steps
const lookup = [steps[0], steps[Math.round(steps.length / 2)],
steps[steps.length - 1]]
lookup.map(step => {
placesService.nearbySearch({
location: step.start_point,
radius: 50,
type: ['restaurant'],
openNow: true
}, (results) => {
results.map(place => {
console.log(place.name);
return new google.maps.Marker({
map: map,
position: place.geometry.location,
// label: '⭐️',
title: place.name
}); //google maps marker
});
results.map(place => {
console.log(place.vicinity);
const contentString = place.name;
return new google.maps.InfoWindow({
title: place.name,
content: contentString
}); //google maps marker
// infoWindows.push(infowindow);
});
});
}); //end of this function
}); //end return directionsdisplay
} //display route ends
} //link scope ends
};
}
export default googleMap;
Appreciate your help!