Customization Tip: Google Maps Platform Styling Wizard

Share your Projects! Dashboards & Frontend
1

I haven’t seen any mention of this yet, so I thought I’d share:

I came across this Styling Wizard for Google Maps that I found very helpful for matching Frontend Themes when using the ‘Show Google Maps as a card’ camera component. I created ‘Silver’ and ‘Dark’ Google Maps themes to match my light and dark colored LovelaceUI themes.

Basic Instructions:

  • (prerequisite) Follow the Show Google Maps as a card documentation to obtain a Google Maps API Key and configure the camera component in Home Assistant.
  • Navigate to the Google Maps Styling Wizard website and click “CREATE A STYLE”.
  • Choose a color option from the “Select theme” section in the left-hand toolbar, and (optionally) adjust other features using the “MORE OPTIONS” toolbar.
  • Select “FINISH”, then “COPY URL” from the bottom of the popup window.
  • Paste the copied URL into a text editor and replace the YOUR_API_KEY text with the API Key string you configured in the first step.
  • Replace the &center=-33.9,151.14999999999998 (numbers may vary) string with the device_tracker markers string(s) you configured in the first step (eg: &markers=color:blue%7Clabel:P%7C{{ states.device_tracker.demo_paulus.attributes.latitude }},{{ states.device_tracker.demo_paulus.attributes.longitude }}).
  • Replace the still_image_url configured in the first step with this newly configured URL.

Notes:

  • You’ll want to omit the entire &center=... string (up until the next &) that’s provided as an example in the HA ‘Show Google Maps as a card’ documentation if you want the map to automatically center on all GPS device trackers.
  • Any device trackers beginning with numbers should be enclosed in square brackets and single quotes (['#']) within the URL with the preceding dot (.) omitted. eg: device_tracker['########'], or &markers=color:blue%7Clabel:P%7C{{ states.device_tracker['demo_paulus'].attributes.latitude }}