title: How to set start point in react-google-maps
body: <p>I am working on an application I am using<code>react-google-maps</code> where I've integrated multiple stop functionality in my application. Now I want to set its starting point like, For example, I want to draw multiple stops from its starting point and it must be a marker with text (Start). I really tried but didn't able to resolve this solution, I will also attach an image of what I want to achieve.</p>
  <p><a href="https://i.stack.imgur.com/2P4ft.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2P4ft.png" alt="image preview" /></a></p>
  <p><strong>Code</strong></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import {
    GoogleMap,
    InfoWindow,
    Marker,
    Polyline,
  } from &quot;@react-google-maps/api&quot;;
  
  function Map({ scheduledOrders }) {
    const [activeMarker, setActiveMarker] = useState(null);
  
    let markers =
      scheduledOrders !== undefined &amp;&amp;
      scheduledOrders &amp;&amp;
      scheduledOrders[0] &amp;&amp;
      scheduledOrders[0].map((item, index) =&gt; ({
        id: index + 1,
        name: item.customerName + &quot; - &quot; + item.customerAddress,
        position: {
          lat: Number(item &amp;&amp; item.order_lat, 10),
          lng: Number(item &amp;&amp; item.order_lng, 10),
        },
      }));
  
  
    console.log(&quot;@@@markser&quot;, markers);
  
    const handleActiveMarker = (marker) =&gt; {
      if (marker === activeMarker) {
        return;
      }
      setActiveMarker(marker);
    };
  
    const handleOnLoad = (map) =&gt; {
      const bounds = new window.google.maps.LatLngBounds();
      markers &amp;&amp; markers.forEach(({ position }) =&gt; bounds.extend(position));
      map.fitBounds(bounds);
    };
  
    return (
      &lt;GoogleMap
        onLoad={handleOnLoad}
        onClick={() =&gt; setActiveMarker(null)}
        mapContainerStyle={{ width: &quot;100%&quot;, height: &quot;88vh&quot; }}
      &gt;
        &lt;Polyline
          path={
            scheduledOrders !== undefined &amp;&amp;
            scheduledOrders &amp;&amp;
            scheduledOrders[0] &amp;&amp;
            scheduledOrders[0].map((item) =&gt; ({
              lat: Number(item &amp;&amp; item.order_lat, 10),
              lng: Number(item &amp;&amp; item.order_lng, 10),
            }))
          }
          options={{
            strokeColor: &quot;#07966B&quot;,
            strokeOpacity: 1,
            strokeWeight: 2,
            icons: [
              {
                icon: &quot;hello&quot;,
                offset: &quot;0&quot;,
                repeat: &quot;10px&quot;,
              },
            ],
          }}
        /&gt;
        {markers &amp;&amp;
          markers.map(({ id, name, position }) =&gt; (
            &lt;Marker
              key={id}
              position={position}
              onClick={() =&gt; handleActiveMarker(id)}
              label={{ text: `${id}`, color: &quot;white&quot; }}
            &gt;
              {activeMarker === id ? (
                &lt;InfoWindow onCloseClick={() =&gt; setActiveMarker(null)}&gt;
                  &lt;div&gt;{name}&lt;/div&gt;
                &lt;/InfoWindow&gt;
              ) : null}
            &lt;/Marker&gt;
          ))}
      &lt;/GoogleMap&gt;
    );
  }
  
  export default Map;
  </code></pre>