When working with location-based applications, it's essential to represent user actions visually. For instance, you may want to create a system that logs when a user clocks in and clocks out. In this article, we'll discuss how to create two markers—one for Clock In and one for Clock Out—using the google-map-react library in a React application.
Problem Scenario
You want to implement functionality in your React app where users can mark their Clock In and Clock Out times on a map. The original code snippet you provided could look something like this:
import React from 'react';
import GoogleMapReact from 'google-map-react';
const Marker = ({ text }) => <div>{text}</div>;
const SimpleMap = () => {
const defaultProps = {
center: { lat: 59.95, lng: 30.33 },
zoom: 11
};
return (
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
defaultCenter={defaultProps.center}
defaultZoom={defaultProps.zoom}
>
{/* Markers will go here */}
</GoogleMapReact>
</div>
);
};
export default SimpleMap;
Enhancing the Code for Clock In and Clock Out Markers
To create markers for both Clock In and Clock Out, you'll need to customize the above code. Below is an enhanced version of the original code that incorporates two distinct markers.
import React, { useState } from 'react';
import GoogleMapReact from 'google-map-react';
const Marker = ({ text, color }) => (
<div style={{ color: color }}>{text}</div>
);
const SimpleMap = () => {
const [markers, setMarkers] = useState([]);
const defaultProps = {
center: { lat: 59.95, lng: 30.33 },
zoom: 11,
};
const handleClockIn = (event) => {
const newMarker = {
lat: event.lat,
lng: event.lng,
text: "Clock In",
color: "green",
};
setMarkers([...markers, newMarker]);
};
const handleClockOut = (event) => {
const newMarker = {
lat: event.lat,
lng: event.lng,
text: "Clock Out",
color: "red",
};
setMarkers([...markers, newMarker]);
};
return (
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
defaultCenter={defaultProps.center}
defaultZoom={defaultProps.zoom}
onClick={(event) => {
const isClockIn = confirm("Clock In? (OK) or Clock Out? (Cancel)");
if (isClockIn) {
handleClockIn(event);
} else {
handleClockOut(event);
}
}}
>
{markers.map((marker, index) => (
<Marker
key={index}
lat={marker.lat}
lng={marker.lng}
text={marker.text}
color={marker.color}
/>
))}
</GoogleMapReact>
</div>
);
};
export default SimpleMap;
Code Explanation
-
Marker Component: This component represents each marker on the map. It takes
textandcoloras props to differentiate between Clock In (green) and Clock Out (red). -
State Management: We use React's
useStatehook to manage an array of markers, which will update every time a user clicks on the map. -
Handling Clicks: When the map is clicked, a confirmation dialog appears asking whether to Clock In or Clock Out. Based on the user’s choice, the respective function is called to set the marker.
-
Dynamic Markers: We dynamically render markers based on the
markersarray, which will grow as the user interacts with the map.
Practical Use Case
This feature can be particularly useful in workforce management systems where employees need to log their work hours. By visually representing Clock In and Clock Out times on a map, administrators can easily track employee attendance and locations.
SEO and Usability Considerations
- Clear Structure: Using headings (H1, H2) provides a clear structure to the content, improving readability.
- Keywords: Utilize keywords like "Google Maps", "React", "clock in", and "clock out" effectively in your headings and body.
- Call to Action: Encourage users to try implementing this functionality in their own applications or provide feedback.
Additional Resources
By implementing the code above, you can create a functional and user-friendly interface for tracking Clock In and Clock Out actions on a Google Map within your React application. Don't forget to replace /* YOUR KEY HERE */ with your actual Google Maps API key to make it work seamlessly!
