Dynamically Rendering Employee Names in Google Maps Waypoint Routing

Other Questions API
1

I’m working on a Google Maps routing application where I want to display employee names dynamically from a JSON response instead of static waypoint labels. My current code shows the last name only, and I’m struggling to correctly map each employee’s name to their respective waypoint marker.

Current Challenge

  • I have a JSON response with employee trip data
  • Need to replace static waypoint markers with dynamic employee names
  • Existing code only displays last name

Example JSON Structure

var employeeRoutes = {
    'status': 'success',
    'data': [
        {
            'employeeId': '101',
            'latitude': '12.9565226',
            'longitude': '77.70730989999993',
            'employeeName': 'Rachel'
        },
        {
            'employeeId': '102', 
            'latitude': '12.9550587',
            'longitude': '77.68279819999998',
            'employeeName': 'Michael'
        }
    ]
};

How can I modify my map rendering code to display each employee’s full name correctly?

2

Hey there! I've worked on similar mapping projects before, and I think I can help you out. The key is using the Google Maps API's marker options to customize labels. Instead of just relying on default markers, you'll want to use the `label` property when creating your markers.

In your code, you can modify the marker creation to include the full employee name like this: each marker can have a `label` set to `employee.employeeName`. This will display the name directly on or near the marker. Also, consider using `marker.setTitle(employee.employeeName)` to add a hover tooltip with the full name. Just remember to parse your latitude and longitude values as floats to ensure accurate positioning.