Embedded Google Maps Widget

Add-on Marketplace UI Widgets
,
1

image
image1017×546 170 KB

A simple webview widget that embeds a Google Maps view with traffic information between a starting point and an ending point.

You must get a Google Maps API Key. See Utilizzare le chiavi API  |  Maps JavaScript API  |  Google for Developers for details. There may be a cost.

To customize this widget with additional properties see Embedding a map  |  Maps Embed API  |  Google for Developers.

This widget is really simple. All it does is let you enter the properties that get directly passed to Google Maps in the URL. Only a fraction of the possible properties are currently supported so it should be easy to customize if you need something different.

My intent is to just publish an MVP and leave the tweaking to you. All you need to is to add the additional properties and their values to the arguments in the URL. If there is a particular feature a lot of people want I’ll consider adding it.

Changelog

Version 0.1

  • initial release

Resources

uid: rlk_googlemap
tags: []
props:
  parameters:
    - description: See
        https://developers.google.com/maps/documentation/javascript/get-api-key
        to generate a key
      label: Google Maps API Key
      name: api
      required: true
      type: TEXT
    - description: The starting point address or lat,lon
      label: Origin
      name: origin
      required: true
      type: TEXT
    - description: The ending point address or lat,lon
      label: Destination
      name: destination
      required: true
      type: TEXT
    - default: "12"
      description: The initial map zoom level, between 0 (whole world) and 21
        (individual buildings). Defaults to 12.
      label: Initial Zoom
      name: zoom
      required: false
      type: INTEGER
      min: 0
      max: 21
    - default: ""
      description: Title for the widget
      label: Widget Title
      name: title
      required: false
      type: TEXT
    - default: "500"
      description: Height in pixels to make the card (defaults to 500)
      label: Card Height
      name: height
      required: false
      type: TEXT
    - default: ""
      description: Text to put into the footer of the widget
      label: Footer
      name: footer
      required: false
  parameterGroups: []
timestamp: Jan 8, 2025, 2:36:07 PM
component: oh-webframe-card
config:
  height: =props.height
  src: ="https://www.google.com/maps/embed/v1/directions?key="+props.api+"&origin="+props.origin+"&destination="+props.destination+"&zoom="+props.zoom
  title: =props.title
  footer: =props.footer
2 Likes