// Initialize and add the map
function initMap() {
// Map options
var mapOptions = {
center: { lat: 28.618846, lng: 77.284942 },
zoom: 12
};
// Create a map object
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Fetch the coordinates and addresses from the API
fetch("http://inventorysoftware.co.in/api/Users/FetchtrackingbyDate")
.then(response => response.json())
.then(data => {
const locations = data.locations; // Assuming the API response contains an array of locations
// Iterate over each location
locations.forEach(location => {
// Create marker for each location
var marker = new google.maps.Marker({
position: { lat: location.lat, lng: location.lng },
map: map,
title: location.title
});
// Create info window content
var infoWindowContent = '<div><strong>' + location.User + '</strong><br>' +
location.address + '</div>';
// Create info window
var infoWindow = new google.maps.InfoWindow({
content: infoWindowContent
});
// Add click event listener to open info window when marker is clicked
marker.addListener('click', function () {
infoWindow.open(map, marker);
});
});
// Extract coordinates for route polyline
var routeCoordinates = locations.map(location => ({
lat: location.lat,
lng: location.lng
}));
// Create a Polyline to represent the route
var routePath = new google.maps.Polyline({
path: routeCoordinates,
geodesic: true,
strokeColor: "#87CEEB",
strokeOpacity: 1.0,
strokeWeight: 2
});
// Set the Polyline on the map
routePath.setMap(map);
// Set the map bounds to include all route coordinates
var bounds = new google.maps.LatLngBounds();
routeCoordinates.forEach(coord => {
bounds.extend(coord);
});
map.fitBounds(bounds);
})
.catch(error => console.error('Error fetching data from API:', error));
}
I tried to show the Employee location on map. But API is not working. No Get Method. Implemented the POST Method where when you POST enter date and companyid in json format, it will return data.