Embed an Interactive Google Map to any Page

I was playing around a little bit with space-lua today and made a little script to embed an interactive Google Map to your page using iframe.

The embed function takes different arguments for basic customizations.
Here are the instruction on how to setup and use it in your space.

First of all here is the script:

space-lua

function embed_map(query, width, height, zoom, map_type)
  -- Set default values for width, height, zoom and map type if not provided
  width = width or 640
  height = height or 480
  zoom = zoom or 14 -- min:1 (zoomed out, whole world) -> max:21 (zoomed in)
  map_type = map_type or "m" -- m-standard, k-staleite
  return {
    html= '<iframe src="https://maps.google.com/maps?hl=en&q=' .. query .. '&t=' .. map_type .. '&z=' .. zoom .. '&ie=UTF8&output=embed" width="' .. width .. '" height="' .. height .. '" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>';
    display="block";
    cssClasses={"my-map"}
  }
end

The function accepts following arguments:

  • query (required) - City, Adress, Coordinates (see examples below)
  • width (optional) - in pixels or %, default is 640
  • height (optional) - in pixels or %, default is 480
  • zoom (optional) - min: 1 (zoomed out, whole world) → max:21 (zoomed in)
  • map_type (optional) :
    • m (default): standard street map
    • k : satelite/hybrid view

And here are couple of examples on how to use the function in your pages:

Example 1.:

The Simplest way, just enter any City as argument:

${embed_map("Paris")}

Example 2.:

Enter a Tourist Attraction, a Landmark or an Address.
It’s not necessary but I recommend using + instead of spaces

${embed_map("Pyramid+of+Giza")}

${embed_map("One+Apple+Park+Way,Cupertino,95014,United+States")}

or decimal coordinates separated by comma or +

${embed_map("52.516289,13.377608")}
or
${embed_map("52.516289+13.377608")}

Example 3.:

Using any of the above examples and any other argument/s:
!!! Empty arguments must be skipped with double-quotes ""

zoom level: 10 and type: k (hybrid view)

${embed_map("Richat+Structure","","","10","k")}

width: 300, height:300, zoom:10 and k for hybrid view

${embed_map("Mount+Everest","300","300","10","k")}

You will see in some areas if you zoom enough, the satelite view will change into birds-eye-view
width: 50%, height: skipped, zoom:19 and k for hybrid view

${embed_map("Statue+of+Liberty","50%","","19","k")}

After this trip around the world :earth_africa:, I hope you try it out and as always I appreciate any feedback.

Happy mapping :world_map:

6 Likes

Although I have to put in the disclaimer that I’m not sure yet that this is how Lua widgets will keep working, I’ll also say that this is super awesome and exactly the type of stuff it will unlock :sunglasses:

2 Likes

image