How do you create a Google map with multiple locations?

szormpas
10 mths ago
43replies
Answered

Hi,

I want to integrate into my Ninox database a Google map to display multiple locations.

Has anyone been able to come up with a functional solution that could be shared here or at least give me some instructions?

Thanks

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

- Rafael Sanchis
- Rafael_Sanchis
- 1 mth ago
- Reported - view
Hi Sotirios, maybe stupid question but how can I by default locate me in Madrid. ?

I add some adress on customer and work, but on map view not

szormpas
1 mth ago
Reported - view

Hi,

if you want to center the map in Madrid then you should replace the Longitude and the latitude of the map's attribute 'center'. Just copy the following code:

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
  </head>
  <body>
    <div id='container' tabindex='0'></div>
    <script type='text/javascript'>
        window.init = function(){
            var map = new AMap.Map('container', {
               mapStyle: 'amap://styles/whitesmoke',
               resizeEnable: true,
               center:[-3.69, 40.42],
               zoom:6,
            });
" +
for loop in x do
    "var circleMarker = new AMap.CircleMarker({
          center:[" +
    first(longitude(loop.Location)) +
    ", " +
    first(latitude(loop.Location)) +
    "],
          radius:20,
          strokeColor:'white',
          strokeWeight:2,
          strokeOpacity:0.5,
          fillColor:'rgba(255,0,0,1)',
          fillOpacity:0.5,
          zIndex:10,
          bubble:true,
          extData:'Test',
          cursor:'pointer',
          clickable: true
        });
        circleMarker.setMap(map);"
end +
"     };
    </script>
    <script src='https://webapi.amap.com/maps?v=1.4.15&key=c7f7805004e70154baa2361373f6f732&callback=init'></script>
  </body>
</html>

- Rafael Sanchis
- Rafael_Sanchis
- 1 mth ago
- Reported - view
Hi Sotirios, The script give me a error on line 48, and I can't find the problem
- szormpas
- 1 mth ago
- Reported - view
Hi, can you upload a screenshot?
- Rafael Sanchis
- Rafael_Sanchis
- 1 mth ago
- Reported - view
- szormpas
- 1 mth ago
- Reported - view
I can not see the line 48
- Rafael Sanchis
- Rafael_Sanchis
- 1 mth ago
- Reported - view
Sorry
- szormpas
- 1 mth ago
- Reported - view
sorry my fault, add ") at the end of the code.

- szormpas
- 1 mth ago
- Reported - view
said:
If labels can be displayed like this, it would be more convenient.

Done! I like this version a lot

mapAPI_v4.ninox
- gold_cat
  
  1 mth ago
  
  Reported - view
  It would be fantastic if the markers could display numbers and aggregate the numbers as the map zooms out.
- szormpas
  
  1 mth ago
  
  Reported - view
  Hi,
  
  We should use the AMap.MarkerClusterer Plug-in but it is a bit complicated and I am not sure if I will be able to make it works.
- gold_cat
  
  1 mth ago
  
  Reported - view
  Sorry, I am an outsider, and some of my requests might sound simple but could be difficult to implement. Currently, I have another issue, my friend. On Android phones, when using Location, it calls Google Maps, but Google Maps is blocked in China. Is there a way to resolve this? Perhaps using another map service for location marking?
- szormpas
  
  1 mth ago
  
  Reported - view
  This is a problem that I don't know how to work around, maybe if you sent an email to Ninox support they might have a solution.
- gold_cat
  
  1 mth ago
  
  Reported - view
  Thank you for your reply, I will give it a try.
- gold_cat
  
  1 mth ago
  
  Reported - view
  Hi friend, I found another map API because the previous one seemed to be quite expensive. Could you please help me see how to import this into Ninox? I've tried but haven't succeeded.
- gold_cat
  
  1 mth ago
  
  Reported - view
  Hi friend, can you help me modify the code? I've already embedded the map into Formula (sorry, I need to hide the key), but there are some issues I need your help to solve.
  
  The edit wrench in the Formula window is covered and cannot be clicked; I don't know which part of the code is affecting it.
  
  I need to write the Location from the Customers database into this new map, but how do I edit this part of the code?I tried editing it in the Formula window below, but it didn’t display correctly.
  
  There is a problem with double-clicking to zoom in or out on the new map; could it be the code I wrote that's affecting it?
  
  mapAPI_v5.ninox
- szormpas
  
  1 mth ago
  
  Reported - view
  Hello!
  
  I'm sorry you have to reject the first solution, which we spent a lot of time making work in Ninox. It seems to be a well made tool.
  
  As for your second option, it seems to be cheaper and this may be reflected in the quality of the code.
  
  You should bear in mind that it is not always easy to integrate such tools into Ninox, as each of them has its own CSS stylesheet, whose classes can modify those of Ninox, which in turn can lead to disruptions in the user interface.
  
  Another difficulty for me is the translation of the site from Chinese to English, which is not always accurate.
  
  If I could give you some general advice, I would say try to integrate the simplest and most basic map first. Then have it show just one customer, and only when you get the first ones working without problems, move on to showing multiple customers on the map.
- gold_cat
  
  1 mth ago
  
  Reported - view
  First of all, I would like to thank Sotirios Zormpas for his continuous help. Initially, the idea of integrating a map into Ninox seemed simple, but step by step, I found there were many issues to resolve.
  
  The first map would cost $6900 per year for commercial use, which is a huge expense. I am not a professional developer; I am a hobbyist doing this to learn coding. So, I found a second map as an alternative solution.
  
  In fact, I have roughly found the issue with displaying the second map. I have created a new post, and if you have time, you could also take a look. Thank you again.

Content aside

Status Answered
1 mth agoLast active
43Replies
712Views
5 Following

How do you create a Google map with multiple locations?

43 replies

Content aside

Overview