How do you create a Google map with multiple locations?

Mel_Charles
10 mths ago
Reported - view

Someone created an elegant multi point map which might be of interest to you

follow this thread and the various links

https://forum.ninox.com/t/q6hrmdv

- szormpas
- 10 mths ago
- Reported - view
yes, I need something like this but I can't find any links in the above post.

szormpas
10 mths ago
Reported - view

and can you share a sample database?

netSME_Sylvain_Moesching
10 mths ago
Reported - view

Here is the code that I use to create the map for a road trip :

Dynamic image is by calling : html("<img src='" + 'Google URL' + "' />")

Creating the URL for the dynamic image and the static image with the button "Carte"

let pno := 0;
let pointeurs := for p in Programme order by Date do
       if Origine = true or
           Origine != true and p.text('Lieu final du jour') != p.text(Voyage.'Départ de') then
           pno := pno + 1;
           "&markers=color:red" + "|label:" + pno + "|" +
           urlEncode(text(p.'Lieu final du jour'))
       end
   end;
'Google URL' := "https://maps.googleapis.com/maps/api/staticmap?" + "center=" + "&zoom=" + Zoom +
   "&size=1222x652&scale=2&maptype=" +
   text(MapType) +
   pointeurs +
   "sensor=false&format=jpg&key=" +
   first(select settings).'Google Maps API Javascript';
'Map Statique' := null;
'Map Statique' := importFile(this, 'Google URL', "staticmap.jpg")

- szormpas
- 10 mths ago
- Reported - view
Thanks for sharing with us your own implementation. It's a good start for me. I'll see how it works in my case!

szormpas
10 mths ago
Reported - view

After research, I concluded that the Maps Embed API is the easiest way to display an interactive Google map inside Ninox using iframe.

You need to get a Google Cloud API key by following the detailed instructions here: https://developers.google.com/maps/documentation/embed/get-started

I want the best direction between my location and each contact's address in my database. For this, I put the code below into a formula field:

let x := latitude('location field');
let y := longitude('location field');
html("<iframe
width=1330
height=630
frameborder=0
style=border:0
referrerpolicy=no-referrer-when-downgrade
src=https://www.google.com/maps/embed/v1/directions?key=YOUR_API_KEY&origin=38.031780,23.702418&destination=" +
x +
"," +
y +
"
allowfullscreen>
</iframe>")

You must replace the 'location field', 'YOUR_API_KEY', and the origin parameter.

I've attached the result for you to look over.

- gold_cat
- 1 mth ago
- Reported - view
Can you share the database file?
- szormpas
- 1 mth ago
- Reported - view
Hi,

you can make your database easily. You will only need a Google Cloud API key (I can not share mine). Have you got yours?

For the implementation, you will use two fields, one Ninox location field, and one function field to use the code above.

Let me know what step you are finding yourself struggling with.
- gold_cat
- 1 mth ago
- Reported - view
Thank you for your reply. Before doing the research, I thought I needed to edit a complex HTML, sorry…

I tried using another map API, but no elements are displayed. Is there an error in my code? Thanks for the help.

It’s my first time using it, please forgive me.

html(" <script src='https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY'></script> <script type='text/javascript'> var map = new AMap.Map('container', { center:[117.000923, 36.675807], zoom:11 }); </script> ")
- szormpas
- 1 mth ago
- Reported - view
I think you should replace 'YOUR_API_KEY' above with the your real key.

gold_cat
1 mth ago
Reported - view

html("
<script src='https://webapi.amap.com/maps?v=1.4.15&key=c7f7805004e70154baa2361373f6f732'></script>
<script type='text/javascript'>
    var map = new AMap.Map('container', {
       center:[117.000923, 36.675807],
       zoom:11
    });
</script>
")

I filled it in but it still didn’t display, my friend.

- szormpas
- 1 mth ago
- Reported - view
Also you should add a div above the script:

<div id="container"></div>

szormpas
1 mth ago
Reported - view

Hi,

I managed to make a working example, can you insert the following code inside a function field?

html("<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='chrome=1'>
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no, width=device-width'>
    <style type='text/css'>
      body,html,#container{
        width: 100%;
        height: 100%;
        margin: 0px
      }
    </style>
    <title>API加载</title>
  </head>
  <body>
    <div id='container' tabindex='0'></div>
    <script src='https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值'></script>
    <script type='text/javascript'>
        var map = new AMap.Map('container', {
           resizeEnable: true,
           center:[116.480983, 39.989628],
           zoom:11
        });
        AMap.plugin('AMap.ToolBar',function(){
           var toolbar = new AMap.ToolBar();
           map.addControl(toolbar)
        })
    </script>
    <script type='text/javascript'>
    if (typeof map !== 'undefined') {
    map.on('complete', function() {
        if (location.href.indexOf('guide=1') !== -1) {
            map.setStatus({
                scrollWheel: false
            });
            if (location.href.indexOf('litebar=0') === -1) {
                map.plugin(['AMap.ToolBar'], function() {
                    var options = {
                        liteStyle: true
                    }
                    if (location.href.indexOf('litebar=1') !== -1) {
                        options.position = 'LT';
                        options.offset = new AMap.Pixel(10, 40);
                    } else if (location.href.indexOf('litebar=2') !== -1) {
                        options.position = 'RT';
                        options.offset = new AMap.Pixel(20, 40);
                    } else if (location.href.indexOf('litebar=3') !== -1) {
                        options.position = 'LB';
                    } else if (location.href.indexOf('litebar=4') !== -1) {
                        options.position = 'RB';
                    }
                    map.addControl(new AMap.ToolBar(options));
                });
            }
        }
    });
}
</script>
  </body>
</html>

- gold_cat
- 1 mth ago
- Reported - view
Thank you for your help!

I can now view the map, but can I get my location and mark it on the map? Then, can I set a text in Niniox to save the latitude and longitude information of that location? Thanks for your help.

gold_cat
1 mth ago
Reported - view

html("<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='chrome=1'>
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no, width=device-width'>
    <style type='text/css'>
      body,html,#container{
        width: 100%;
        height: 100%;
        margin: 0px;
      }
      #centerMarker {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 18px;
        background-color: red;
        border: 2px solid white;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 1000;
      }
    </style>
    <title>固定中心点地图</title>
  </head>
  <body>
    <div id='container' tabindex='0'></div>
    <div id='centerMarker'></div>
    <script src='https://webapi.amap.com/maps?v=1.4.15&key=c7f7805004e70154baa2361373f6f732'></script>
    <script type='text/javascript'>
        var map = new AMap.Map('container', {
           resizeEnable: true,
           center:[104.26813,30.885106],
           zoom:11
        });
        AMap.plugin('AMap.ToolBar',function(){
           var toolbar = new AMap.ToolBar();
           map.addControl(toolbar)
        });
    </script>
  </body>
</html>

Hello friend,

If there’s no location service available, I’ve thought of a workaround: setting a red dot on the map to determine the latitude and longitude. But how can I use this with Ninox elements? For example, moving the red dot to the desired location and clicking a button to write the latitude and longitude information into a Ninox text field. Is this achievable?

szormpas
1 mth ago
Reported - view

Hi,

if you want to add Point marks into your map then you can try something like this:

html("<!doctype html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no, width=device-width'>
    <title>图标点标记</title>
    <link rel='stylesheet' href='https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css'/>
    <style>
        html,body,#container{
            height:100%;
            width:100%;
        }
        .amap-icon img{
            width: 25px;
            height: 34px;
        }
    </style>
</head>
<body>
<div id='container'></div>
<script type='text/javascript' src='https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值'></script>
<script type='text/javascript'>
    // 创建地图实例
    var map = new AMap.Map('container', {
        zoom: 13,
        center: [116.4,39.92],
        resizeEnable: true
    });      // 以 icon URL 的形式创建一个途经点
    var viaMarker = new AMap.Marker({
        position: new AMap.LngLat(116.38,39.92),
        // 将一张图片的地址设置为 icon
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
    });      // 创建一个 Icon
    var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(135, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(-9, -3)
    });      // 将 icon 传入 marker
    var startMarker = new AMap.Marker({
        position: new AMap.LngLat(116.35,39.89),
        icon: startIcon,
        offset: new AMap.Pixel(-13, -30)
    });      // 创建一个 icon
    var endIcon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-95, -3)
    });      // 将 icon 传入 marker
    var endMarker = new AMap.Marker({
        position: new AMap.LngLat(116.45,39.93),
        icon: endIcon,
        offset: new AMap.Pixel(-13, -30)
    });      // 将 markers 添加到地图
    map.add([viaMarker, startMarker, endMarker]);
</script>
</body>
</html>

- szormpas
- 1 mth ago
- Reported - view
Hi,

I am attaching a sample database where you can choose and save your location into the 'My Location' field which then it automatically diplayed on the map below.

Are you happy with this implementation?

mapAPI.ninox

szormpas
1 mth ago
Reported - view

said:
For example, moving the red dot to the desired location and clicking a button to write the latitude and longitude information into a Ninox text field. Is this achievable?

Υou can use a 'Location' field in Ninox with which you can easily search and store the longitude and latitude of an address.

- gold_cat
- 1 mth ago
- Reported - view
Thank you, Sotirios Zormpas. This is very helpful to me. I just noticed there is a Location field.

If I have multiple addresses, how can I modify the code? For example, all addresses are in another table: (select 'Customers')['My Location']. Thanks.
- gold_cat
- 1 mth ago
- Reported - view
One more small issue: when I first enter the Ninox map, it does not automatically display. It only refreshes and shows when I click the wrench icon in the top right corner. Can this issue be resolved?

szormpas
1 mth ago
Reported - view

Hi,

In the new version of the attached database, there is a marker on the map for each customer.

let x := (select Customers);
html("<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='chrome=1'>
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no, width=device-width'>
    <style type='text/css'>
      body,html,#container{
        width: 100%;
        height: 100%;
        margin: 0px
      }
    </style>
    <title>API加载</title>
  </head>
  <body>
    <div id='container' tabindex='0'></div>
    <script type='text/javascript'>
        window.init = function(){
            var map = new AMap.Map('container', {
               resizeEnable: true,
               center:[116.480983, 39.989628],
               zoom:11
            });
            if (location.href.indexOf('guide=1') !== -1) {
                map.setStatus({scrollWheel: false});
                map.plugin(['AMap.ToolBar'], function() {
                  map.addControl(new AMap.ToolBar({liteStyle:true}))
                });
            };
// 创建一个 Marker 实例：
" +
for loop in x do
    "var " + first(loop.Name) +
    " = new AMap.Marker({
    position: new AMap.LngLat(" +
    longitude(first(loop.Location)) +
    ", " +
    latitude(first(loop.Location)) +
    "),
});"
end +
"  // 多个点实例组成的数组
var markerList = [" +
text(x.Name) +
"];  map.add(markerList);            };
    </script>
    <script src='https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=init'></script>
<script>  </script>
  </body>
</html>

mapAPI_v2.ninox

- gold_cat
- 1 mth ago
- Reported - view
I found the official map style. Can your demonstration switch to the “whitesmoke” style? Thanks.
- gold_cat
- 1 mth ago
- Reported - view
If labels can be displayed like this, it would be more convenient.
- szormpas
- 1 mth ago
- Reported - view
Hi,

Done!

mapAPI_v3.ninox
- gold_cat
- 1 mth ago
- Reported - view
I’m so grateful for your assistance. You make things better.

How do you create a Google map with multiple locations?

43 replies

Content aside

Overview