Markers & Infowindows

A basic Google Map with default Zoom and Center.

Basic Marker

import { Marker } from 'solid-google-maps'

<Marker
  position={{ lat: 10, lng: 10 }}
  clickable={true}
  onClick={() => alert('marker was clicked!')}
  title={'clickable google.maps.Marker'}
/>

Customized Pin

import { AdvancedMarker, Pin } from 'solid-google-maps'

<AdvancedMarker position={{ lat: 20, lng: 10 }} title={'AdvancedMarker with customized pin.'}>
  <Pin background={'#22ccff'} borderColor={'#1e89a1'} glyphColor={'#0f677a'}></Pin>
</AdvancedMarker>

HTML Marker

<AdvancedMarker position={{ lat: 30, lng: 10 }} title={'AdvancedMarker with custom html content.'}>
  <div
    style={{
      width: '16px',
      height: '16px',
      position: 'absolute',
      top: 0,
      left: 0,
      background: '#1dbe80',
      border: '2px solid #0e6443',
      'border-radius': '50%',
      transform: 'translate(-50%, -50%)',
    }}
  ></div>
</AdvancedMarker>

Infowindow

Standalone

An InfoWindow can be added directly to the map and controlled via the open prop

import { Map, InfoWindow } from 'solid-google-maps'
 
const MyMap: Component = () => {
  const [open, setOpen] = createSignal(true)
 
  return (
    <Map
      style={{ height: '500px', width: '100%' }}
      defaultZoom={3}
      defaultCenter={{ lat: 22.54992, lng: 0 }}
      gestureHandling={'greedy'}
      disableDefaultUI={true}
    >
      <InfoWindow position={{ lat: 22.54992, lng: 0 }} maxWidth={200} open={open()} onOpenChange={setOpen}>
        <p>
          This is the content for another infowindow with <em>HTML</em>
          -elements.
        </p>
      </InfoWindow>
    </Map>
  )
}

Anchored

An InfoWindow can be anchored to a Marker by setting its anchor prop. This is a performant was to share one InfoWindow between many markers.

Anchored as Child

An InfoWindow can be anchored to a Marker by adding it as a child of the Marker.

import { Map, InfoWindow } from 'solid-google-maps'
 
const MyMap: Component = () => {
  const [open, setOpen] = createSignal(true)
 
  return (
    <Map
      style={{ height: '500px', width: '100%' }}
      defaultZoom={3}
      defaultCenter={{ lat: 22.54992, lng: 0 }}
      gestureHandling={'greedy'}
      disableDefaultUI={true}
    >
      <AdvancedMarker position={{ lat: 22.54992, lng: 0 }}>
        <InfoWindow maxWidth={200}>
          <p>
            This is the content for another infowindow with <em>HTML</em>
            -elements.
          </p>
        </InfoWindow>
      </AdvancedMarker>
    </Map>
  )
}

Controlled Marker position

import { createSignal } from 'solid-js'
import { Marker } from 'solid-google-maps'

const [position, setPosition] = createSignal({ lat: 50, lng: 10 })
 
<Marker
  position={position()}
/>

Marker with Infowindow

import { AdvancedMarker, InfoWindow } from 'solid-google-maps'

const [infoWindowOpen, setInfoWindowOpen] = createSignal(false)
 
<AdvancedMarker
  position={{ lat: 60, lng: 10 }}
  onClick={() => setInfoWindowOpen(!infoWindowOpen())}
>
  <InfoWindow open={infoWindowOpen()} onOpenChange={setInfoWindowOpen}>
    This is the content for an infowindow.
  </InfoWindow>
</AdvancedMarker>