How to create multiple/dynamic markers on google maps

Guides
#1

I am interested in this topic and I created this tutorial.

Previously I have made a tutorial using the maps component. here

In this tutorial, I use two data sources

  1. Offline (from File) csv file
csv file

csv

  1. Online (Google Spreadsheet), you can use other online databases like mySQL, Airtable, etc.
Spreadsheet

csv

A. Data Process

1. Offline

a. File checking procedure

  • If the file is not in the kodular assets folder, it will be automatically copied to the assets folder. If the file already exists, it will automatically read the csv file.

b. File copy procedure

  • I’m using FileTools by @vknow360 to copy and use the File component of kodular to read data (text).
  • In this example the original source file is in

/storage/emulated/0/bluetooth/Testspread1.csv

(adjust this address to your file), then copy it to the kodular assets folder

/storage/emulated/0/Makeroid/assets/Testspread1.csv

include file name

blocks(16)
blocks(16)1011×360 29.8 KB

read
blocks(17)
got text
blocks(20)

c. Data processing procedure

  • After getting the data from the file, the global data is added to the data_csv variable, then each item is added to the list. In this data there are four lists (no, lng, lat, name). Looping data to display markers on the map.

blocks(14)
blocks(14)887×929 64.3 KB

note : number of lists divided by two to get the value used as index to select latitude and longitude to get camera position (optional)

2. Online

a. Retrieving data from google spreadsheet

  • Edit the spreadsheet url https://docs.google.com/spreadsheets/d/1hFa6HKKEJqTlOphf18JLIbb-wFgHd2M46PFvmFidkzE/edit#gid=0
    to
    https://docs.google.com/spreadsheets/d/1hFa6HKKEJqTlOfhf18JLIbb-wFgHd2M46PFvmFidkzE/export?format=csv

Make sure the sheet is given access permission to view.
shared
b. Data processing procedure

  • After getting the data from the file, the global data is added to the data_csv variable, then each item is added to the list. In this data there are four lists (no, lng, lat, name). Looping data to display markers on the map.

web
blocks(18)
got text
blocks(19)

blocks(14)
blocks(14)887×929 64.3 KB

note : number of lists divided by two to get the value used as index to select latitude and longitude to get camera position (optional)

B. Displaying Info

1. On Click Marker
2. In the Info Window Click
  • After clicking on the marker, we get the latitude and longitude information and the name of the place, from this information we add it to the data_place variable to display the details (here we use the bottom sheet and the web viewer)
    blocks(22)

C. Block additional Procedure

Detail
  1. JSONstring
  • To simplify writing JSON text format when creating markers
    blocks(13)
  1. url
  • to convert marker data to url in web viewer
    blocks(23)
  1. reset
  • reset
    blocks(24)

download aia
mapGO4GAME.aia (38.5 KB)

13 Likes
Google Maps - Multiple Markers & Info associated with them
How to call latitudes and longitudes from aitable and set them on "add marker"s lat-lng point
Marker Clickable
Marker on google maps
Search nearby markets
Why marker doesnt appear on map?
#2

@sugarlesscreator vey Nice this will be :100: % helpful I Loved it .(｡◕‿◕｡)➜(｡◕‿◕｡)➜:smiling_face_with_three_hearts::smiling_face_with_three_hearts:

1 Like
#3

Nice work!!

1 Like
#4

that looks like an actual guide. Thank you for crating this guide

1 Like
#5

I liked it very much,
but does it take a lot of sites?

#6

Maybe after got response from database create a procedure to load markers in map by 10 or by 20 using a clock

2 Likes
#7

@Jinx @msr79526 @Panos_42 Thank you all

What sites you mean @_FTTX

Yups good idea @dora_paz :+1:

3 Likes
#8

The locations of the application users
are longitude and latitude.
When I have time, I start building it, but I saw your work and liked it, and it helped me a lot as well.
Thank you

1 Like
#9
#10

So how can I know what number marker the user clicked?
I tried this way :

blocks(5)
blocks(5)765×193 13.9 KB

But I get an error : ‘’ Attempt to get item number 0, of the list (1 2 3 4 5 6 7 8 9 10 11). The minimum valid item number is 1 ‘’

#11

Change index in list thing component to latitude of list global lat.

actually no need to use any block. just use this block.

2 Likes
#12

@sugarlesscreator

How can I put a description on it? I already have the title, can’t I put a description on it?

How can I see all or most of the properties that I can add in this JSON format?

How does the color code work in the market?

#13

Json string should look like this for example with all properties set

[{lat:43.0222,lng:25.03514,color:210,title:Example_Title,snippet:Example_Snippet,draggable:false/true}]

1 Like
#14

Thank you very much snippet: it was what I mentioned as a description.

How do I know what color is what?

I don’t know the color code used in the locations.

#15

on google maps (add marker from Json), to get color not using color component or color hex code, but using numeric code allowed from 0 to 359

See
2021_07_12_11_29_10_720_1600

3 Likes
#16

Is there a page that shows me and gives me the color code?

#17

copy Testspread1.csv put it Where?

#18

In this tutorial, my csv file is in Bluetooth folder.
If your csv in folder download, you need to change folder name in file copy procedure blocks

1 Like
#19

if there are 2 markers then what will be the json string??
plzz help

#20

[{lat:43.0222,lng:25.03514,color:110,title:Example_Title1,snippet:Example_Snippet1,draggable:false},{lat:43.1822,lng:25.19514,color:210,title:Example_Title2,snippet:Example_Snippet2,draggable:false}]

1 Like