Here API in Phoenix

index.html.eex

<%
data = Db.query("SELECT * FROM locaitons")
results = Db.to_map(data)

[head | tail] = results
lat = Map.get(head, "lat")
lng = Map.get(head, "lng")
locationName = Map.get(head, "locationName")

%>

<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1549984893" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

<div id="map" style="width: 100%; height: 400px; background: grey" />
<script  type="text/javascript" charset="UTF-8" >
    
function addMarkersToMap(map) {
  <%= for result <- results do %>

    var <%= Map.get(result, "locationName") %> = new H.map.Marker({lat:<%= Map.get(result, "lat") %>, lng:<%= Map.get(result, "lng") %>});
    map.addObject(<%= Map.get(result, "locationName") %>);

  <% end %>
}

var platform = new H.service.Platform({
  app_id: 'your id',
  app_code: 'your code',
  useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
  tileSize: pixelRatio === 1 ? 256 : 512,
  ppi: pixelRatio === 1 ? undefined : 320
});

var map = new H.Map(document.getElementById('map'),
  defaultLayers.normal.map, {
  center: {lat: <%= lat %>, lng: <%= lng %>},
  zoom: 6,
  pixelRatio: pixelRatio
  });

var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

var ui = H.ui.UI.createDefault(map, defaultLayers);

addMarkersToMap(map);
</script>