Multi marker google map

HCL Leap Leap Forum
,
1

i want to do a multi marker google map of data retrived from a table ?

i call a service and all data (latitude , longitude) so i want to put this in array table and call this function in my onStart app

need help !!!!

2

If I understand correctly, you will load a table with lat/long and then populate a Google Map with the pins?

If that's the case, you can do an onChange on the table (i.e. when the table finishes loading) and then iterate through the table via JS and build your Google map object. You could put something similar to the below code to iterate the table - just replace the <do something> with your code to build the pins...

app.getSharedData().countTableRowsForEntry = function (table) {
    for (var i = 0; i < table.getLength(); i++) {
        var lat = "F_Latitude";
        var long = "F_Longitude";
        <do something>
    }
    return <pin data>;
}

You can access the column data with 

(get(table.get(i), lat).getValue());
(get(table.get(i), long).getValue());
3

I' m using leafnet with openstreetmap to show a map with markers. All geo data are stored (separated with "##" and "**" in a multiline field ("F_Marker") and were added to the map within a Javascript loop in the OnShow Event of the HTML Area:

var input = BO.F_Marker.getValue();
var markers = input.split("##"); // Array aller Adressen
for ( var i=0; i < markers.length; ++i )
{
var werte = markers[i].split("**"); // Array mit Name,Adresse,Typ,Koordinaten
if (werte[2] === 'LWL-Anschluss'){
L.marker( [werte[3], werte[4]], {
icon:blueIcon
})
.bindPopup(werte[0] + "<br />" + werte[1])
.addTo(map);
}
...
else {
L.marker( [werte[3], werte[4]], {
icon:blackIcon
})
.bindPopup(werte[0] + "<br />" + werte[1])
.addTo(map);
}
}

Not the sexiest way, but it works ;-) If it will be helpful for you, I can export and send you the Volt app.