Solid Google Maps  

Solid Google Maps provides a loader and simple reactive bindings for the Google Maps API

Demo and examples: https://solid-google-maps.vercel.app/

Install

``bash
pnpm install solid-google-maps
`

Map

`tsx
import { APIProvider, Map } from 'solid-google-maps'

const BasicExample = () => {
return (

style={{ height: '500px', width: '100%' }}
defaultZoom={3}
defaultCenter={{ lat: 22.54992, lng: 0 }}
gestureHandling={'greedy'}
disableDefaultUI={true}
/>

)
}
`

Advanced Marker

`tsx
import { APIProvider, Map } from 'solid-google-maps'

const MarkerExample = () => {
return (

style={{ height: '500px', width: '100%' }}
defaultZoom={3}
defaultCenter={{ lat: 22.54992, lng: 0 }}
gestureHandling={'greedy'}
disableDefaultUI={true}
>





)
}
`

Info Window (Controlled State)

`tsx
import { APIProvider, Map, InfoWindow } from 'solid-google-maps'

const MarkerExample = () => {
const [infoWindowOpen, setInfoWindowOpen] = createSignal(false)

return (

style={{ height: '500px', width: '100%' }}
defaultZoom={3}
defaultCenter={{ lat: 22.54992, lng: 0 }}
gestureHandling={'greedy'}
disableDefaultUI={true}
>
setInfoWindowOpen(!infoWindowOpen())}>


open={infoWindowOpen()}
onOpenChange={setInfoWindowOpen}
maxWidth={200}
headerContent={Header}
>
InfoWindow Content




)
}
`

Info Window (Anchored)

`tsx
import { APIProvider, Map, InfoWindow } from 'solid-google-maps'

const AnchorExample = () => {
const [anchor, setAnchor] = createSignal(null)

return (

style={{ height: '500px', width: '100%' }}
defaultZoom={3}
defaultCenter={{ lat: 22.54992, lng: 0 }}
gestureHandling={'greedy'}
disableDefaultUI={true}
>
setAnchor(event.marker)}>


setAnchor(event.marker)}>




Header}>
InfoWindow Content




)
}
`

Access to the Imperative API

All Components have a ref property that provides direct access to the Google Maps API. Additionally, the library provides a useMap() method that can be used to get a reference to the API. If you have multiple maps you can provide them an id prop and then use the ID in useMap(id) to specify the map you want to access. useMap() must be used inside the APIProvider component.

Testing

First, install dependencies and Playwright browsers:

`bash
pnpm install
pnpm playwright install
`

Then ensure you've built the library:

`bash
pnpm build
`

Then run the tests using your local build against real browser engines:

`bash
pnpm test
``