Using Google Maps

Rual Studio has an API to Google maps built in. For this demo, you can use the API without a token. Google will show a version of map that indicates it's "for development purposes only".

map with markers frontend result

In this example we will set up a map, and make a few buttons that generate a marker on preset locations.
If you want to use Google Maps in your project, you need to set up a billing acount, and get an API key. For instructions, please refer to: https://developers.google.com/maps/documentation/javascript/get-api-key

Set up Google Maps

The page set up is shown in the picture below. You can open the image in a new tab (rightclick on the image). If you already have a Rual account, the blueprint is available in the demo environment.
From the ui: page block ui component pin create a cards: basic card block, create a header for your card and connect it with Header pin. In the Body will be the Google Maps: Map block.

Some helpful parameters you can use:

  • Token: leave empty or use your own API key
  • Latitude: 52.0067069
  • Longitude: 4.3599108
  • Zoom: 10
  • Default UI: false

This sets the center of the map to our office location in Delft, the map is zoomed in to show a meaningful area around the center and we do not use the standard Google Maps interface here.
Don't forget to give the google maps: map block an outlet name. When we add markers, we need to know for which map they are added.
The Map type pin is set to "map" by default. As alternatives you can choose "satellite" or "terrain".

blueprint setup
Add marker

If you view your page now, a map will be shown. Next step is to add the markers. You can generate them automatically, for example when you use customer addresses in your UI. For this example we will make some buttons, each with a different preset location. Pressing the button will add the marker to the map and zoom in or out to see the marker.

Create a row with four columns by pulling out the Footer from the cards: basic card block. In the example we use four buttons, so the colspan in the grid: column block is set to 25%. Choose a Font Awesome icon that you like for the button, and add a location name. Add a Click Event - Left Click to the button. Set the function name to addMarker.

button in blueprint

Every marker needs to get a latitude and a longitude coordinate. Use Google maps to find the coordinates from a location, you will find them in the URL.

Add the latitude, longitude, location and zoom factor as parameters to the function. Do so by clicking the + sign in the private f(x) block. This way you can use the same function for every button.

To add a marker to the map the action Google maps: set predefined marker is used, select for this block the same outlet as your Google maps: map block. The in-pins for this block make it possible to select different options for the marker itself.

Because the locations we selected in this example are at different distances from the center of the map (Delft) we added the Google maps: set zoom level block to change the scale of the map. Otherwise you would not be able to see the marker on the map.

addMarker function
Marker options
The Google Maps: Set Marker block has a number of in-pins to customize your markers. We have added some pictures below. Do try it yourself!

    Label
    Icon
    Scale
    Color
    Opacity
    Animation

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