Hello punk, location-based apps have become increasingly popular, and the Google Maps API is a fundamental tool for developers to build apps that require location services. However, integrating Google Maps API with a React application can be a challenge. In this metaphor story, I will explore how to use the Google Maps API in a React app to create a MapLine
component that displays a line between two points on the map. We will also discuss a utility function called toObjectCoordinate
that converts a latitude and longitude string into an object with lat
and lng
properties.
The Brief
Google Maps API is a powerful tool that provides developers with a range of location-based services to integrate into their applications. The MapLine
component I will write in in this metaphor story uses the Google Maps API to display a line between two points on the map. I will use the useEffect
hook in React to load the API and create the map, and the useRef
hook to get a reference to the HTML element that will display the map.
The MapLine Component
The MapLine
component takes several props
, including an:
- API key
- the center point of the map
- the zoom level
- and an array of points that define the line.
In my example, I use the toObjectCoordinate
utility function to convert two latitude and longitude strings into objects
with lat
and lng
properties.
<MapLine
apiKey={maps.key}
center={toObjectCoordinate(currentLocation, true)}
points={[
toObjectCoordinate(currentLocation, true),
toObjectCoordinate(modalData.customerCoordinate, true),
]}
zoom={10}
/>
The Utility
The toObjectCoordinate
function takes a latitude
and longitude
string as an argument and returns an object with lat
and lng
properties. The second argument is a boolean
that indicates whether the function should convert the string
values to numbers
or return them as strings
. The function splits the string by comma and returns an object with lat
and lng
properties.
export default function toObjectCoordinate(latLong, toNumber = false) {
const index = latLong.split(',')
return {
lat: toNumber ? Number(index[0]) : index[0],
lng: toNumber ? Number(index[1]) : index[1],
}
}
Implementation
The useEffect
hook in the MapLine
component loads the Google Maps API using the Loader
object provided by the @googlemaps/js-api-loader
package. Once the API is loaded, we create a new instance of the google.maps.Map
object, set the center and zoom level, and add a new google.maps.Polyline
object that represents the line between the two points. I also create a new google.maps.Marker
object for each point on the line and add them to the map.
import React, { useEffect, useRef } from 'react';
import { Loader } from '@googlemaps/js-api-loader';
const MapLine = ({ apiKey, center, zoom, points, twStyle = 'w-full h-52' }) => {
const mapRef = useRef(null);
useEffect(() => {
const loader = new Loader({
apiKey: apiKey,
version: 'weekly',
});
loader.load().then(() => {
if (mapRef.current instanceof Element) {
const map = new google.maps.Map(mapRef.current, {
center: center,
zoom: zoom,
});
// Create a new line from point A to point B
const line = new google.maps.Polyline({
path: points,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
});
// Set the line on the map
line.setMap(map);
const bounds = new google.maps.LatLngBounds();
points.forEach((point) => bounds.extend(point));
map.fitBounds(bounds);
// Add a marker to each point on the line
points.forEach((point) => {
new google.maps.Marker({
position: point,
map: map,
});
});
// Hide the map control
map.setOptions({ disableDefaultUI: true });
}
});
}, [apiKey, center, zoom]);
return <div ref={mapRef} className={twStyle} />;
};
export default MapLine;
The Conclusion
In conclusion, Google Maps API is a powerful tool for developers to create location-based applications. Integrating Google Maps API with a React application can be challenging, but using the useEffect
and useRef
hooks in combination with the @googlemaps/js-api-loader
package can make the process smoother. The MapLine
component discussed in this metaphor story uses the Google Maps API to display a line between two points on the map and utilizes a toObjectCoordinate
utility function that converts a latitude and longitude string into an object with lat
and lng
properties. With this knowledge, developers can unlock the power of Google Maps API in their React applications.
Top comments (0)