CODEWITHSUNDEEP
reactjsgoogle-maps-react
user2026178
user2026178

Reputation: 318

Polyline in google maps component react JS

I am trying to add a route between locations using a Polyline, however, when I wrap the marker component and the Polyline component in a div, neither render on the map. However, when returning both in the same return, I am forced to wrap both in an enclosing tag, otherwise an error will be thrown.

I am using google-maps-react library and reactJS.

<Map item
                className="map-container"
                google={google}
                zoom={4}
                initialCenter={initialCenter}
                fullscreenControl={false}
                streetViewControl={false}
                mapTypeControl={false}
              >
                {Object.values(groups).map((location, index) => {
                  const latestLocation = _.first(getSortedLocationsFromGroup(location))
                  const dashPins =
                    `${window.location.origin}/imgs/icon-pin-purple.png`




              return (
                <Marker
                  key={index}
                  icon={dashPins}
                  onClick={this.onMarkerClick}
                  position={{
                    lat: latestLocation.coords.latitude,
                    lng: latestLocation.coords.longitude
                  }}
                />
      <Polyline
         path={[ { lat: 39.072515, lng: -84.116524 }, { lat: coords.latitude, lng: coords.longitude }]}
         options={{
           strokeColor: dataColors.purple,
           strokeOpacity: 1,
           strokeWeight: 4,
           offset: '0%',
           icons: [
             {
               strokeWeight: 2,
               icon: nodeOnLine,
               offset: '0%',
               repeat: '35px'
             }
           ]
         }}
       />
              )
            })}
          </Map>

Upvotes: 2

Views: 2618

Answers (2)

Leela Venkatesh K
Leela Venkatesh K

Reputation: 1710

I think that's expected because react expects only one top level element to be present in the returned jsx. So you should wrap it inside something like Fragment on react. I don't think it's a bug. As @mateimihai mentioned, it's advised to pass a key prop to an array of elements.

@user2026178 please let us know if this explains the error you've been encountering.

The issue with big of them not rendering could be because it might be expecting something other than a div. I've not worked with react-native but as far as I understand it has special components for mobile. Probably That might help

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

AFAIK you can return an array inside the map loop, but you must set unique keys to each element:

<Map item
     className="map-container"
     google={google}
     zoom={4}
     initialCenter={initialCenter}
     fullscreenControl={false}
     streetViewControl={false}
     mapTypeControl={false}>

     {Object.values(groups).map((location, index) => {

         const latestLocation = _.first(getSortedLocationsFromGroup(location));
         const dashPins = `${window.location.origin}/imgs/icon-pin-purple.png`;

         return [
             <Marker key={'marker-' + index}
                     icon={dashPins}
                     onClick={this.onMarkerClick}
                     position={{
                        lat: latestLocation.coords.latitude,
                        lng: latestLocation.coords.longitude
                     }} />,
             <Polyline key={'polyline-' + index}
                       path={[
                           { lat: 39.072515, lng: -84.116524 },
                           { lat: coords.latitude, lng: coords.longitude }
                       ]}
                       options={{
                           strokeColor: dataColors.purple,
                           strokeOpacity: 1,
                           strokeWeight: 4,
                           offset: '0%',
                           icons: [
                               {
                                   strokeWeight: 2,
                                   icon: nodeOnLine,
                                   offset: '0%',
                                   repeat: '35px'
                               }
                           ]
                       }} />
          ]
    })}
</Map>

Upvotes: 1

Related Questions