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".
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.
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".
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
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.
Google Maps: Set Markerblock has a number of in-pins to customize your markers. We have added some pictures below. Do try it yourself!
Icon custom image*
Icon using 'dot'
*Scale and color can't be used with custom icon images