Breaking News: Grepper is joining You.com. Read the official announcement!

showing pick up and drop Position as marker and draw polyline as straight line using react google map

Sivan answered on July 3, 2023 Popularity 1/10 Helpfulness 1/10

answer showing pick up and drop Position as marker and draw polyline as straight line using react google map

showing pick up and drop Position as marker and draw polyline as straight line using react google map

Comment

import React, { useEffect, useState } from 'react';
import { GoogleMap, Marker, Polyline } from '@react-google-maps/api';

const MAP_API_KEY = 'YOUR_API_KEY'; // Replace with your Google Maps API key

const MyComponent = () => {
  const [pickupPosition, setPickupPosition] = useState(null);
  const [dropoffPosition, setDropoffPosition] = useState(null);

  const handleMarkerDragEnd = (position, markerType) => {
    const { latLng } = position;
    const newPosition = { lat: latLng.lat(), lng: latLng.lng() };
    
    if (markerType === 'pickup') {
      setPickupPosition(newPosition);
    } else if (markerType === 'dropoff') {
      setDropoffPosition(newPosition);
    }

    localStorage.setItem('pickupPosition', JSON.stringify(pickupPosition));
    localStorage.setItem('dropoffPosition', JSON.stringify(dropoffPosition));
  };

  useEffect(() => {
    const storedPickupPosition = localStorage.getItem('pickupPosition');
    const storedDropoffPosition = localStorage.getItem('dropoffPosition');
    
    if (storedPickupPosition) {
      setPickupPosition(JSON.parse(storedPickupPosition));
    }

    if (storedDropoffPosition) {
      setDropoffPosition(JSON.parse(storedDropoffPosition));
    }
  }, []);

  return (
    <GoogleMap
      center={pickupPosition}
      zoom={10}
      mapContainerStyle={{ width: '100%', height: '400px' }}
    >
      {pickupPosition && (
        <Marker
          position={pickupPosition}
          draggable
          onDragEnd={(e) => handleMarkerDragEnd(e, 'pickup')}
        />
      )}
      {dropoffPosition && (
        <Marker
          position={dropoffPosition}
          draggable
          onDragEnd={(e) => handleMarkerDragEnd(e, 'dropoff')}
        />
      )}
      {pickupPosition && dropoffPosition && (
        <Polyline
          path={[pickupPosition, dropoffPosition]}
          options={{
            strokeColor: 'blue',
            strokeOpacity: 1,
            strokeWeight: 3,
          }}
        />
      )}
    </GoogleMap>
  );
};

export default MyComponent;

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: chat.openai.com

Tags: draw drop line map marker pick polyline position using whatever

Link to this answer
Share Copy Link

Contributed on Jul 03 2023

Sivan

0 Answers Avg Quality 2/10

showing pick up and drop Position as marker and draw polyline as straight line using react google map

Contents

More Related Answers

showing pick up and drop Position as marker and draw polyline as straight line using react google map

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.