Custom map markers

On the homepage you might have seen an example with a Google Maps: Map. That examlpe will be used in this tutorial. The page will be set up like ths: From the page create a cards: basic card, create a title for your card and connect it with Header Pin. In the Body will be the Google Maps: Map. For the Maps to work you need an API key, the following URL explains how you can create an key: https://developers.google.com/maps/documentation/javascript/get-api-key.

Some helpfull parameters you can use:

  • Latitude: 52.378956
  • Longitude: 4.896063
  • Zoom: 7
  • Default UI: false
Add marker

On the page just created a map will be shown. There are multiple ways to add a marker to the map. In tis tutprial a marker will be added everytime a button is pressed. Place the button in the Footer. Add an Click Event - Left Click to the button. To add a marker to the map the action Google Maps: Set Marker can be used, fill the outlet with the same name as your map. The options within this action are all straight forward. Fill the Id with value: utils: generate guid, this will give every generated marker it's own GUID.

Every marker needs to get a Latitude and a Longitude. This will determine the place on the map. If you want to get accurate Coordinates from a location, you can search it up on Google Maps. The number needs to be formatted like: 50.123456. Google Maps: Set Marker has multiple different parameters to use, every pin has its own description on what it does and the requirements.

    Label
    Icon
    Scale
    Color
    Opacity
    Animation

The marker will alwas be in the same place with the hardcoded coordinates. With number: random between you can get randum numbers for your markers. The random numbers needs to be numbers in the million (positive or negative). The random generated numbers needs to be devided bij 1 million. This is done for the numbers behinde the comma, for a more randm marker.

Set Marker Options

None

Label

Icon custom image*

Icon using 'dot'

Scale

Color

Opacity

Animation BOUNCE

Animation DROP

*Scale and color can't be used with custom icon images