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
-
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
-
and can you share a sample database?
-
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") -
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.
-
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>
-
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.
-
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>
Content aside
- Status Answered
- 1 mth agoLast active
- 43Replies
- 689Views
-
5
Following