Skip to content

Commit 2cd395c

Browse files
sascalasascala
committed
Addresses @willum070's comments
1 parent 1e499cd commit 2cd395c

4 files changed

Lines changed: 35 additions & 50 deletions

File tree

‎samples/control-custom/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,11 @@
2424
</head>
2525

2626
<body>
27-
<gmp-map zoom="12" center="chicago" </gmp-map>
27+
<gmp-map zoom="12" center="41.85, -87.65">
28+
<button id="btnCenterMap" slot="control-block-start-inline-center" title="Click to recenter the map" type="button">
29+
Center Map
30+
</button>
31+
</gmp-map>
2832

2933
</body>
3034

‎samples/control-custom/index.ts‎

Lines changed: 6 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,6 @@
88

99
const chicago = { lat: 41.85, lng: -87.65 };
1010

11-
/**
12-
* Creates a control that recenters the map on Chicago.
13-
*/
14-
function createCenterControl(map) {
15-
const controlButton = document.createElement('button');
16-
17-
// Set CSS for the control.
18-
controlButton.style.backgroundColor = '#fff';
19-
controlButton.style.border = '2px solid #fff';
20-
controlButton.style.borderRadius = '3px';
21-
controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
22-
controlButton.style.color = 'rgb(25,25,25)';
23-
controlButton.style.cursor = 'pointer';
24-
controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
25-
controlButton.style.fontSize = '16px';
26-
controlButton.style.lineHeight = '38px';
27-
controlButton.style.margin = '8px 0 22px';
28-
controlButton.style.padding = '0 5px';
29-
controlButton.style.textAlign = 'center';
30-
31-
controlButton.textContent = 'Center Map';
32-
controlButton.title = 'Click to recenter the map';
33-
controlButton.type = 'button';
34-
35-
// Setup the click event listeners: simply set the map to Chicago.
36-
controlButton.addEventListener('click', () => {
37-
map.setCenter(chicago);
38-
});
39-
40-
return controlButton;
41-
}
42-
4311
//Get the gmp-map element
4412
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
4513

@@ -51,20 +19,12 @@ async function initMap() {
5119
// Get the inner map.
5220
const innerMap = mapElement.innerMap;
5321

54-
// Set map options.
55-
mapElement.innerMap.setOptions({
56-
zoom: 12,
57-
center: chicago,
58-
});
59-
60-
// Create the DIV to hold the control.
61-
const centerControlDiv = document.createElement('div');
62-
// Create the control.
63-
const centerControl = createCenterControl(map);
64-
// Append the control to the DIV.
65-
centerControlDiv.appendChild(centerControl);
66-
67-
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
22+
// Get the button element from the HTML
23+
const centerButton = document.getElementById('btnCenterMap') as HTMLButtonElement;
24+
// Move the event listener here
25+
centerButton.addEventListener('click', () => {
26+
innerMap.setCenter(chicago);
27+
});
6828
}
6929

7030
initMap();

‎samples/control-custom/style.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,22 @@ body {
1515
padding: 0;
1616
}
1717

18+
gmp-map {
19+
height: 100%;
20+
}
21+
22+
#btnCenterMap {
23+
background-color: #fff;
24+
border: 2px solid #fff;
25+
border-radius: 3px;
26+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
27+
color: rgb(25, 25, 25);
28+
cursor: pointer;
29+
font-family: Roboto, Arial, sans-serif;
30+
font-size: 16px;
31+
line-height: 38px;
32+
margin: 8px 0 22px;
33+
padding: 0 5px;
34+
text-align: center;
35+
}
1836
/* [END maps_control_custom] */

‎samples/control-custom/tsconfig.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@
1111
"dom",
1212
"dom.iterable"
1313
],
14-
"moduleResolution": "Node",
15-
"jsx": "preserve"
14+
"moduleResolution": "bundler",
15+
"jsx": "preserve",
16+
"types": [
17+
"@types/google.maps"
18+
]
1619
}
17-
}
20+
}

0 commit comments

Comments
 (0)