Custom styling <InfoWindow>

[rol4nd909]

Hi,

I hope someone can tell me how I can style or create a custom InfoWindow?

Thanks in advance.

[usefulthink]

You absolutely can. A simple approach is to use the <AdvancedMarker> component for this, since it accepts any HTML as content. In this case the bottom/center point of the provided html-element will be placed exactly at the specified coordinates. More advanced implementations might use the google.maps.OverlayView and implement something completely custom.

[rol4nd909]

Thanks, I will try this out.

[rol4nd909]

Not sure what I'm doing wrong, but the pins go on top of the info-container?

this is the code

    <AdvancedMarker
      onClick={() => onToggle(!isOpen)}
      position={{
        lat: Number(dealer.location_lat),
        lng: Number(dealer.location_long),
      }}
      title={dealer.name}
      collisionBehavior={google.maps.CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY}
    >
      <div className={classes.markerContainer}>
        {isOpen && (
          <div className={classes.mapInfoWindow}>
            <strong>{dealer.name}</strong>
            <address>
              {dealer.street_name} {dealer.house_number}
              <br />
              {dealer.zipcode}, {dealer.city}
            </address>

            <button
              className={classes.mapsSelectDealerButton}
              type="button"
              onClick={() => setValue(name, dealer.id.toString())}
            >
              {String(dealer.id) === value ? translations.selected : translations.select}
            </button>
          </div>
        )}
        <div className={classes.mapMarker} />
      </div>
    </AdvancedMarker>

.DealerChooser {
  &-markerContainer {
    display: grid;
    font-size: 1rem;
    gap: 1rem;
    justify-items: center;
  }

  &-mapInfoWindow {
    display: grid;
    border: 1px solid #ddd;
    background-color: #fff;
    gap: 1rem;
    inline-size: 16.5rem;
    padding-block: 1.25rem 1.5rem;
    padding-inline: 1.5rem;

    > * {
      margin: 0;
    }
  }

  &-mapMarker {
    --marker-color: #de0039;
    --marker-dot-color: #fff;

    position: relative;
    top: -0.625em;
    display: grid;
    padding: 0.25em;
    border: 0.5em solid var(--marker-color);
    border-radius: 50%;
    background-color: var(--marker-dot-color);
    block-size: 0.5em;
    inline-size: 0.5em;

    &::after {
      position: absolute;
      bottom: -1.875em;
      left: -0.375em;
      width: 0;
      height: 0;
      border: 0.625em solid transparent;
      border-top: 1.0625em solid var(--marker-color);
      content: '';
    }
  }
}

[usefulthink]

First, I would suggest to not use the same marker for both the Infowindow and actual marker, that would only be useful if you're planning to animate between them or something. Just make two in the same location instead.

To handle the overlapping, you can use the zIndex and collisionBehavior props of the AdvancedMarker component.

(I just noticed that the AdvancedMarker documentation page really needs to be improved...)

[usefulthink]

this is what I meant with animating between an "light infowindow" and marker: https://storage.googleapis.com/gmp-maps-demos/advanced-markers/index.html#weather-marker

[rol4nd909]

Yeah I saw that one, it's way to fancy for what I need 😊

[rol4nd909]

I'm almost there, one thing left I have buttons inside and those are not clickable.
If I add draggable={true} to the <AdvancedMarker> than it works but I also able to drag it arronund.

  return (
    <>
      <AdvancedMarker
        onClick={() => onToggle(!isOpen)}
        position={{
          lat: Number(dealer.location_lat),
          lng: Number(dealer.location_long),
        }}
        title={dealer.name}
        collisionBehavior={google.maps.CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY}
      >
        <div className={classes.mapMarker} />
      </AdvancedMarker>

      {isOpen && (
        <AdvancedMarker
          position={{
            lat: Number(dealer.location_lat),
            lng: Number(dealer.location_long),
          }}
          className={classes.mapInfoWindow}
          zIndex={google.maps.Marker.MAX_ZINDEX + 1}
        >
          <button onClick={() => onToggle(!isOpen)}>X</button>
          <strong>{dealer.name}</strong>
          <address>
            {dealer.street_name} {dealer.house_number}
            <br />
            {dealer.zipcode}, {dealer.city}
          </address>

          <button
            className={classes.mapsSelectDealerButton}
            type="button"
            onClick={() => setValue(name, dealer.id.toString())}
          >
            {String(dealer.id) === value ? translations.selected : translations.select}
          </button>
        </AdvancedMarker>
      )}
    </>
  )

[usefulthink]

just guessing, but can you try to add pointer-events:all to the mapInfoWindow class in css?

[rol4nd909]

pointer-events: all !important did the trick!

Thanks a lot for your help, now searching for a way to center and zoom the selected marker :)