0

How do you create a Google map with multiple locations?

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

43 replies

null
    • szormpas
    • 3 mths 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
      • 3 mths 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
      • 3 mths 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
      • 3 mths ago
      • Reported - view

       

      Hi Sotirios, The script give me a error on line 48, and I can't find the problem

      • szormpas
      • 3 mths ago
      • Reported - view

        Hi, can you upload a screenshot?

      • Rafael Sanchis
      • Rafael_Sanchis
      • 3 mths ago
      • Reported - view

       

      • szormpas
      • 3 mths ago
      • Reported - view

        I can not see the line 48

      • Rafael Sanchis
      • Rafael_Sanchis
      • 3 mths ago
      • Reported - view

       

      Sorry

      • szormpas
      • 3 mths ago
      • Reported - view

       sorry my fault, add  ")  at the end of the code.

    • szormpas
    • 3 mths 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
      • 3 mths ago
      • Reported - view

       
      It would be fantastic if the markers could display numbers and aggregate the numbers as the map zooms out.

      • szormpas
      • 3 mths 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
      • 3 mths 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
      • 3 mths 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
      • 3 mths ago
      • Reported - view

       Thank you for your reply, I will give it a try.

      • gold_cat
      • 3 mths 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
      • 3 mths 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.

      1. 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.
      2. 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.
      3. 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
      • 3 mths 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
      • 3 mths 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.

Login to reply

Content aside

  • Status Answered
  • 3 mths agoLast active
  • 43Replies
  • 854Views
  • 5 Following