Update custom controls sample and migrate to new repo#1121
Update custom controls sample and migrate to new repo#1121
Conversation
|
Here is the summary of changes. You are about to add 11 region tags.
This comment is generated by snippet-bot.
|
willum070
left a comment
willum070
left a comment
There was a problem hiding this comment.
Thank you so much, this totally makes my day!! A great start, but there are a few things to clean up. Specifically there's a refactor I'd like to see done for all migrations where it makes sense (see my comments and use #1119 for reference).
Also please make sure your PR doesn't contain any changes to dist/, as that stuff gets generated automatically once your changes are merged.
| </head> | ||
|
|
||
| <body> | ||
| <gmp-map zoom="12" center="chicago" </gmp-map> |
There was a problem hiding this comment.
| <gmp-map zoom="12" center="chicago" </gmp-map> | |
| <gmp-map zoom="12" center="41.85, -87.65"> </gmp-map> |
There was a problem hiding this comment.
The gmp-map element needs lat/lng coordinates. I usually just use whatever's been defined in the TS (in this case the value for chicago rather than the variable).
|
|
||
| <body> | ||
| <gmp-map zoom="12" center="chicago" </gmp-map> | ||
| <!-- |
There was a problem hiding this comment.
You can remove ln. 28 - ln. 37, since you're now using the dynamic bootstrap.
| */ | ||
|
|
||
| // [START maps_control_custom] | ||
| let map: google.maps.Map; |
There was a problem hiding this comment.
You can remove this since you're now using innerMap instead of map.
| <!doctype html> | ||
| <!-- | ||
| @license | ||
| Copyright 2019 Google LLC. All Rights Reserved. |
There was a problem hiding this comment.
Global: Update all license header copyright dates to 2026.
| /** | ||
| * Creates a control that recenters the map on Chicago. | ||
| */ | ||
| function createCenterControl(map) { |
There was a problem hiding this comment.
Here is where the fun begins! My practice has been to refactor things to be declarative rather than generate UI programmatically. Here are the steps I'd recommend:
- Take the CSS definitions from the createCenterControl() function and move them into a new CSS style.
- Nest the button element in the gmp-map element and use the slot attribute to position it.
- Within initMap(), add code to get the button element from the HTML.
- Move the event handler for the button into initMap().
- Remove the createCenterControl() function.
- Remove the injection code on ln. 61 - ln. 68, as it's not needed now that you've got HTML.
See #1119 for reference.
| @@ -0,0 +1,25 @@ | |||
| /** | |||
| * @license | |||
| * Copyright 2019 Google LLC. All Rights Reserved. | |||
| */ | ||
| /* [START maps_control_custom] */ | ||
| /* | ||
| * Always set the map height explicitly to define the size of the div element |
There was a problem hiding this comment.
Remove the comment ln. 8 - ln. 10
| * Always set the map height explicitly to define the size of the div element | ||
| * that contains the map. | ||
| */ | ||
| #map { |
There was a problem hiding this comment.
You can remove this style now that gmp-map is in use.
2 participants
Update custom controls sample and migrate to new repo