Cloud 5 - Integrate with Google Maps

Transcript

Hello, and welcome to the Cloud5 interview series. My name is James Talbot, and I’m here with Varun Mitra, who is a Cloud Architect for AEM Engineering. And today we’re going to talk about one of the projects that he worked on at Hubbell Homes. And in this project, he actually worked on several different integrations, but one of the most difficult integrations that he worked on was the Google Maps integration. So Varun, can you talk about your experience integrating Google Maps into the application and some of the best practices you’ve discovered around performance here? Sure, James. Great. Hello, everyone. My name is Varun Mitra. So I’m going to talk a bit about Hubbell Homes. Now Hubbell Homes is one of the recent projects that I led. Hubbell Homes is part of Sikhi Suitehouse, and they are a global construction and housing conglomerate. Their website, their older website, there were several integrations, including Google Maps, Google Analytics, and Hubs platforms. So there were a lot of optimization that we had to do again for them. So we are going to talk about one such optimization that we did for them, particularly around Google Maps. So let’s see. Now, Google Maps is an external plugin. So again, whenever we are loading up any external API within ETS, we have to think about optimization. So before I start talking about Hubbell Homes, I’m going to talk about Durista. This is one of the sites my colleague worked on. Now for Durista, we had a different Google Maps integration. You can see that over here, the user is providing his zip code and then clicking the search button. This is a typical Google Maps integration, and what it allows us to do is it basically allows us to hide the Google Maps initialization behind a user interaction. Since Google Maps is not loaded by default on page load, as such, we have an opportunity to basically keep this logic within delay.js. By delaying Google Maps initialization, we can avoid the total blocking time, which might come in whenever we load up an external API. So if we have an implementation like this, which allows you to hide the Maps initialization behind a button click, then you can very well rely on default ETS capabilities, have the Google Maps initialized within the delay.js. This approach will have a minimal impact on your Lighthouse score. Now let’s go ahead and talk about Hubbell Homes. For hubbellhomes.com, the Google Maps was loaded on a landing page, pretty much like as you would see on any real-world site. So we did not have that particular opportunity to hide behind a user interaction. So what we had to do was we had to basically implement a two-tier strategy. So as soon as the page is loaded up, what we go ahead and do is we basically display a static image. As you can see, there is a static image that is displayed with a loading map message. So we initialize the right-hand side rail, wherein we are displaying some cards. Again, this allows us to delay the map loading by a few seconds. Since the map loading is now delayed, we can go ahead and start initializing the Google Map and start making that API call so that the map data could be fetched. Once the map data is fetched, we can replace the static image with the actual map data and display that particular map information. Basically, we are substituting the actual map loading with a static image. And for best results, I would suggest you to use a screenshot of the map, the actual map that you are going to later on display. Once the particular amount of time has passed, you can go ahead and start displaying the actual map data. So basically, to sum it all up, you need to separate your code into two components, eager and delayed. Within the eager phase, you will display a static map image. And during your delayed stage, you will make that API call fetch the map data. And once you have all the map data delivered to you, you will replace the static image with the actual map. So this is how you can implement Google Maps on a landing page. Yeah, this is very useful Varun. Thank you for giving us these strategies on how to successfully integrate Google Maps with Edge Delivery Services. We will see you again soon. Sure. Thank you, everyone. Thank you.