Polyline not working in web but works on android and ios.

[vipulbhj]

Does anyone know if MapView.Polyline works ?? I have tired to google around quite a bit but didn't find any useful resource that worked.

Here is my code

import React, { useEffect, useState } from 'react';
import { FontAwesome } from '@expo/vector-icons';
import DashboardLayout from '../../../layouts/DashboardLayout';
//@ts-ignore
import MapView, { PROVIDER_GOOGLE } from 'react-native-web-maps';
import { Button, HStack, VStack, Text, Icon, Input } from 'native-base';
const API_KEY = "YOUR_KEY_HERE";

export default function Map() {
  const [mapLoaded, setMapLoaded] = useState(false);

  useEffect(() => {
    // Check if map script is already present in DOM
    if (!document.body.dataset.mapLoaded) {
      const mapScript = document.createElement('script');
      mapScript.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}`;
      mapScript.onload = () => {
        // set dataset property on body to indicate map script has been loaded.
        document.body.dataset.mapLoaded = 'true';
        setMapLoaded(true);
      };
      document.head.appendChild(mapScript);
    }
  }, []);

  return (
    <>
      {mapLoaded ? (
        <DashboardLayout title="Add Address">
          <MapView
            provider={PROVIDER_GOOGLE}
            region={{
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
              latitude: 33.81609,
              longitude: -117.92252,
            }}
          >
            <MapView.Marker
              draggable
              coordinate={{
                latitude: 33.81609,
                longitude: -117.92252,
              }}
            />
            <MapView.Polyline
              coordinates={[
                {
                  latitude: 33.81609,
                  longitude: -117.92252,
                },
                {
                  latitude: 33.81579,
                  longitude: -117.92275,
                },
                {
                  latitude: 33.83441,
                  longitude: -117.93617,
                },
                {
                  latitude: 33.83513,
                  longitude: -117.93932,
                },
                {
                  latitude: 33.83544,
                  longitude: -117.94033,
                },
                {
                  latitude: 33.83583,
                  longitude: -117.94126,
                },
                {
                  latitude: 33.84046,
                  longitude: -117.94985,
                },
              ]}
              strokeWidth={4}
            />
          </MapView>
          <VStack
            pt={4}
            px={{ base: 4 }}
            _light={{ bg: 'white' }}
            _dark={{ bg: 'coolGray.800' }}
          >
            <HStack
              py={3}
              px={{ base: 4 }}
              bg="primary.100"
              alignItems="center"
            >
              <Icon
                as={FontAwesome}
                name="map-marker"
                _light={{ color: 'primary.900' }}
                _dark={{ color: 'primary.700' }}
              />
              <Text
                fontSize="md"
                _light={{ color: 'coolGray.400' }}
                _dark={{ color: 'coolGray.50' }}
              >
                Thornridge Cir. Syracuse, Connecticut
              </Text>
            </HStack>
            <Text
              color="black"
              fontSize="sm"
              mt={{ base: 4 }}
              fontWeight="medium"
            >
              Building Name / House No.
            </Text>
            <Input
              py={3}
              fontSize="md"
              mt={{ base: 4 }}
              placeholder="2118"
              fontWeight="semibold"
              borderColor="coolGray.400"
            />
            <Text
              fontSize="sm"
              color="black"
              mt={{ base: 4 }}
              fontWeight="medium"
            >
              Address Label
            </Text>
            <HStack space={{ base: 1 }} justifyContent="space-between" mt={3}>
              <Button
                width="30%"
                height={12}
                variant="outline"
                borderColor="primary.900"
                _text={{ color: 'primary.900' }}
                onPress={() => console.log('hello')}
              >
                Home
              </Button>
              <Button
                width="30%"
                variant="outline"
                borderColor="coolGray.400"
                _text={{ color: 'coolGray.400' }}
                onPress={() => console.log('hello')}
              >
                Office
              </Button>
              <Button
                width="30%"
                variant="outline"
                borderColor="coolGray.400"
                _text={{ color: 'coolGray.400' }}
                onPress={() => console.log('hello')}
              >
                Other
              </Button>
            </HStack>
            <Button
              py="3"
              mt={{ base: 5 }}
              bg="primary.900"
              variant="outline"
              onPress={() => console.log('hello')}
              _text={{ color: 'white', fontSize: 'sm' }}
            >
              SAVE ADDRESS
            </Button>
          </VStack>
        </DashboardLayout>
      ) : (
        'Loading ...'
      )}
    </>
  );
}

MapView.Marker is working fine for me but no luck with Polyline. I am not sure if I am doing something wrong or it's just not supported, can someone please help me with this.

If it works, can someone guide me to a working example or something ??

[vipulbhj]

@Minishlink @kasajei @VinceBT @coorde

Hey guys, can someone help me with this ?