#PowerApps: Componentizing Google Maps
Hi PowerAppers!
PowerApps Canvas Apps Components remain one of those features that seem to have endless possibilities. I have, for quite some time now, been working with the Google Maps API in many of my applications to return a static image pointing to a specific location on the map.
As I moved from application to application, I noticed that I always ended up doing the same operations: format a label with a string representing the maps API Url, then substituting very specific elements within that string, with address information or latitude and longitude coordinates, adding the API key, and playing with the size of the map image returned by the maps API. Frankly, a time consuming process that added no value to my projects.
This is a sample Google maps API Url string with some the classic substitution patterns:
In order to solve this problem, I decided to farm this out to Canvas Apps Components. Since my Url string had many placeholders for things like location, zoom values, image size, API key, and even the color of the marker, I figured all those elements could become custom input properties to the component, as shown below:
We could then proceed to add an image control from the media gallery, and set the Image property to our formatted Url with the custom properties as placeholders, as shown below:
Finally, we need the component size to grow accordingly with the map size - here's an idea: you may want to introduce a buffer between the map size and the component size, which would visually act as a border. For this we will set the component Width and Height properties to the GoogleMap.MapImgWidth and GoogleMap.MapImgHeight custom property values and we are done.
To test this all, I created a simple test harness screen:
Now that the map is an actual component, it's easy to move it across PowerApps apps using the new import from cloud applications.
You can download the component from the PowerApps Community Apps Gallery, here.
Related Articles:
#PowerApps: Numeric Up/Down control with persisted button press event using components
Until next post!
MG.-
Mariano Gomez, MVP
PowerApps Canvas Apps Components remain one of those features that seem to have endless possibilities. I have, for quite some time now, been working with the Google Maps API in many of my applications to return a static image pointing to a specific location on the map.
As I moved from application to application, I noticed that I always ended up doing the same operations: format a label with a string representing the maps API Url, then substituting very specific elements within that string, with address information or latitude and longitude coordinates, adding the API key, and playing with the size of the map image returned by the maps API. Frankly, a time consuming process that added no value to my projects.
This is a sample Google maps API Url string with some the classic substitution patterns:
 |
| Click image to enlarge |
In order to solve this problem, I decided to farm this out to Canvas Apps Components. Since my Url string had many placeholders for things like location, zoom values, image size, API key, and even the color of the marker, I figured all those elements could become custom input properties to the component, as shown below:
 |
| Component Custom Properties |
We could then proceed to add an image control from the media gallery, and set the Image property to our formatted Url with the custom properties as placeholders, as shown below:
 |
| Click image to enlarge |
To test this all, I created a simple test harness screen:
Now that the map is an actual component, it's easy to move it across PowerApps apps using the new import from cloud applications.
You can download the component from the PowerApps Community Apps Gallery, here.
Related Articles:
#PowerApps: Numeric Up/Down control with persisted button press event using components
Until next post!
MG.-
Mariano Gomez, MVP
Comments