This post about how you can create a Google Maps like Map component inside a Lightning component but without using Google Maps.
Wait You Said Google Maps in Lightning?
It would be awesome if you could embed Google Maps in a Lightning component and there are lots of posts that show how to do it, but if you look at them you’ll see they all use an iframe to embed it. The reason they need to use an iframe is because the Google Maps JS api has to be used from their servers. There’s no way in Lightning to use a JS library like that.
Now you maybe thinking… “well why not download it and upload it as a Static Resource?”. You can, but it’s not so simple because of the way Google dynamically generates/downloads the files.
What options are there then?
Well thankfully Google Maps isn’t the ONLY map solution available. Instead you can use a library called Leaflet.js.
This is for Shared Regions (like header, navbar, footer) in the Community app builder:
Today I learnt that if your component implements force:hasRecordId then it won’t get a record ID, even if you’re on an Account page for example.
Secondly – these shared regions are not re-rendered during navigation – which is obviously great for performance reasons 🙂
Why would a component in the shared areas want the recordId?
My use case for this is pretty simple- my Navigation Bar has some shortcuts to specific Products, so if the user ends up on the Product page (either by clicking directly or from a Search), then I want my nav bar to highlight that we’re now looking at that Product!
So, how can we workaround this limitation and have a component in the shared region get the recordId?