<template
is="ui-googlemap"
key="string"
zoom="number"
locations="array"
position="object"
width="string"
height="string"
>
<div
class="ui-googlemap"
data-key="{{props.key ?? '' |> esc}}"
data-zoom="{{props.zoom ?? 5 |> esc}}"
data-locations="{{JSON.stringify(props.locations ?? []) |> esc}}"
data-position="{{JSON.stringify(props.position || {}) |> esc}}"
>
<div
id="map-{{props.key}}"
style="width:{{props.width ?? '100%'}};height:{{ props.height ?? '400px'}}"
></div>
<div id="locations-{{props.key}}"></div>
</div>
</template>
