feat: Migrates the event-poi sample to js-api-samples.

[willum070]

This PR makes the following changes:

• Migrates the event-poi sample to js-api-samples.
• Refactors the app to use the gmp-map element and dynamic loading.
• Updates the app to use the New Places API.
• Simplifies the sample by removing directions functionality (too many things distract from the primary use case).

[snippet-bot]

Here is the summary of changes.

You are about to add 3 region tags.

• samples/event-poi/index.html:7, tag maps_event_poi
• samples/event-poi/index.ts:7, tag maps_event_poi
• samples/event-poi/style.css:6, tag maps_event_poi

---

This comment is generated by snippet-bot.
If you find problems with this result, please file an issue at:
https://github.com/googleapis/repo-automation-bots/issues.
To update this comment, add snippet-bot:force-run label or use the checkbox below:

• Refresh this comment

[ReeseJones]

Looks good, I have a few suggestions and questions.

[ReeseJones]

Regarding the "div" on line 20 - This doesn't appear to be used in any way? I see there are css styles referencing it, but I cannot find any references to this in the sample code leading me to believe its unused? Let me know if I am missing something here.

[ReeseJones]

The await on innerMap = await mapElement.innerMap is strange since innerMap is not a promise.

its a lot like writing

await 0;
innerMap = mapElement.innerMap;

Which does things regarding processing the javascript event loop, but maybe shouldn't be used for a sample?

Does this work without it? if it does I think it should be removed.

If not, I think we should promote another way to check for when custom-components are upgraded into theirselves (and then will have all their properties and what not set). Below is something I copied from a google search about how you wait for web components to be defined.

async function waitForComponent(tagName: string): Promise<void> {
  // customElements.whenDefined returns a Promise
  await customElements.whenDefined(tagName);
  console.log(`${tagName} is defined and ready to be used`);
}

// Usage
(async () => {
  await waitForComponent('gmp-map');
  // Initialize component logic here, access properties etc...
})();

[ReeseJones]

How do you feel about avoiding global variables?

Let infowindow be declared on line 19 and pass it in as a parameter to showInfoWindow on line 27?

[ReeseJones]

Unless you prefer to define variables globally for samples, I would define this in initMap just before its used on line 16.