1
2
3
4
5
6
{
  "center": {
    "lat": 40.67,
    "lng": -73.94
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="m-map" data-behavior="Map" data-map-center='{{ center | json_encode() }}'>
	<div class="m-map__inner" data-map-embed></div>
	<div class="m-map__nav">
		<button class="m-map__button m-map__button--expand" data-map-expand aria-label="Expand">
			{% include 'components/atoms/icon/icon' with { icon: 'action--expand' } %}
		</button>

		<ul>
			<li class="m-map__nav-item">
				<button class="m-map__button" data-map-zoom="1" aria-label="Zoom In">{% include 'components/atoms/icon/icon' with { icon: 'action--md-plus' } %}</button>
			</li>
			<li class="m-map__nav-item">
				<button class="m-map__button" data-map-zoom="-1" aria-label="Zoom Out">{% include 'components/atoms/icon/icon' with { icon: 'action--md-minus' } %}</button>
			</li>
		</ul>
	</nav>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.m-map {
  @include theme-contrast;
  background: var(--color--background);
  padding-bottom: 2/3 * 100%;
  position: relative;

  &__inner {
    @include stretch;

    .gm-fullscreen-control.gm-fullscreen-control {
      opacity: 0;
      pointer-events: none;
    }
  }

  &__nav {
    @include stretch;
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    pointer-events: none;
  }

  &__nav-item {
    padding-top: 4px;
  }

  &__button {
    @include reset-btn;
    pointer-events: auto;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    @include theme-inverse;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color--background);

    &:hover {
      background: var(--color--action);
    }

    @include key-focus {
      outline: none;
      background: var(--color--action);
    }
  }
}