title: How to change the default Marker used in the Google Maps API Drawing Layer controls
body: <p>I would like to know how could I use a custom marker with google maps drawing controls. I want to do that because I need to place a marker when a user clicks in the map and have it open a info window (when clicked) and have a few custom actions in there (buttons and such).</p>
  
  <p>I'm using react and <a href="https://github.com/JustFly1984/react-google-maps-api" rel="nofollow noreferrer">@react-google-maps/api</a> for this, but that might be besides the point since it is just a wrapper around the Maps Javascript API provided by Google.</p>
  
  <p>From the <a href="https://developers.google.com/maps/documentation/javascript/reference/drawing#DrawingManagerOptions.markerOptions" rel="nofollow noreferrer">docs</a> it is possible to provide <code>google.maps.MarkerOptions</code> to the <code>google.maps.drawing.DrawingManagerOptions</code>. Unfortunately there is no option there to provide a custom <code>Marker</code> to be rendered.</p>
  
  <p>I tried using the <code>markercomplete()</code> call back exposed by the <code>google.maps.drawing.DrawingManager</code> since it has the newly created <code>Marker</code> as parameter, and then doing something like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>const handleNewMarker = (marker) =&gt; {
    marker.addListener('click', function() {
      setActiveMarker(marker);
    });
  }
  </code></pre>
  
  <p>My map component would then be something like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;GoogleMap
    zoom={18}
    center={latLng}
  &gt;
    {activeMarker &amp;&amp; &lt;CustomInfoWindow anchor={activeMarker} /&gt;}
    &lt;DrawingManager
      options={{
        markerOptions: {
          clickable: true,
          draggable: true,
        },
      }}
      onMarkerComplete={handleNewMarker}
    /&gt;
  &lt;/GoogleMap&gt;
  </code></pre>
  
  <p>Although this worked, it is not at all viable for production, for some reason the <code>InfoWindow</code> takes too much time to appear in the screen, that approach might be causing a memory leak and I don`t know why.</p>
  
  <p>I might be missing something here, but on my research I didn't find a single soul trying to create a custom marker with the drawing tool, just custom markers by themselves which is relatively easy to do. My ideal case scenario, since I'm using React, would be to create a <code>CustomMarker</code> component with a <code>CustomInfoWindow</code> inside it, and just tell the drawing controls, "hey, take this marker and use it whenever a user tries to draw a new marker with your drawing tool".</p>
  
  <p>Thank you.</p>
  
  <h2>Edit</h2>
  
  <p>Here is a screenshot of what I mean, that marker in the screen shot was placed there using the "new marker" drawing control, and I need the "new marker" drawing control to place a custom marker defined by me.</p>
  
  <p><a href="https://i.stack.imgur.com/ALmE7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ALmE7.png" alt="enter image description here"></a></p>