I am creating a FileMaker GO solution for iOS, in this solution I am using a web viewer that is showing a map with some markers by using HERE JavaScript API. When I use the solution on Mac OS X, everything is fine, I see the map, the markers, I can click on them and it opens Map application as expected. But on iOS, the map remains grey it doesn't seems to load, but I can see the markers and click on them. Something else, I noticed the same behavior on Safari with Mac OS X when I look at the examples on the HERE API Developer website, but with Chrome or Firefox everything work properly, here is one of the examples :
https://developer.here.com/documentation/examples/maps-js/markers/markers-on-the-map
Does anyone have an idea ?
Here the html/javascript code I am using :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body style="position: relative" >
<div id="mapContainer" style="position: fixed ; top: 0 ; bottom: 0 ; left : 0 ; right : 0 ; background: grey" />
<script type="text/javascript" charset="UTF-8" >
/* DATA RECEIVED FROM FILEMAKER */
/* JSON array with full addresses */
var jsonInterventions = [{"estExecutee":0,"idIntervention":"E1630517-3EFF-DD4F-981F-A6E703BB8798","jsonattributes":1,"lat":48.81266,"lng":2.42228,"ordre":1},{"estExecutee":0,"idIntervention":"22E00113-A7F6-4DC7-95FB-252AB0A1E028","jsonattributes":1,"lat":48.721023,"lng":2.538195,"ordre":1}] ;
/* Total number of addresses */
var totalInterventions = 2 ;
/* Additional info on the FileMaker file in order to use the FMP protocol */
var AdresseServeur = '$' ;
var NomFichier = 'Mosaïc' ;
var ApiKey = 'XXXXXX';
/* FUNCTIONS */
function GetSVGMarkup(color,colorfont,ordre){
return '<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">'+
'<path data-name="layer1" d="M32 62c0-17.1 16.3-25.2 17.8-39.7A18 18 0 1 0 14 20a17.7 17.7 0 0 0 .2 2.2C15.7 36.8 32 44.9 32 62z" fill="' + color + '"></path>'+
'<text x="32" y="32" font-size="20pt" ' + 'font-family="Arial" font-weight="bold" text-anchor="middle" ' + 'fill="'+ colorfont +'">'+ ordre +'</text>'+
'</svg>';
}
/* Display markers on the map */
function AffichageMarqueurs(platform) {
/* For each address */
for(var i=0 ; i<totalInterventions ; i++){
var color = jsonInterventions[i].estExecutee ? "#AAAAAA" : "#1b468d",
colorfont = jsonInterventions[i].estExecutee ? "black" : "white",
ordre = jsonInterventions[i].ordre,
svgMarkup = GetSVGMarkup(color,colorfont,ordre),
icon = new H.map.Icon(svgMarkup);
/* Creation of a marker used the sent coordinates */
marker = new H.map.Marker(jsonInterventions[i], {icon: icon});
groupePoints.addObject(marker);
marker.setZIndex(i);
/* We keep the address ID for later */
var idIntervention = jsonInterventions[i].idIntervention ;
marker.setData(idIntervention);
/* Marker added to the map */
map.addObject(groupePoints);
map.getViewModel().setLookAtData({bounds: groupePoints.getBoundingBox()});
}
}
function CasErreur(error) {
/* nothing */
}
// Initialize the platform object:
var platform = new H.service.Platform({
'apikey': ApiKey,
useHTTPS: true
});
// Get the default map types from the Platform object:
//var defaultLayers = platform.createDefaultLayers();
/* Creation of the layer seen by default */
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
// Instantiate the map:
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,
{
zoom: 4,
center: { lng: 5, lat: 50 },
pixelRatio
});
// Enable the event system on the map instance:
var mapEvents = new H.mapevents.MapEvents(map);
// Add event listeners:
map.addEventListener('tap', function(evt) {
// Log 'tap' and 'mouse' events:
console.log(evt.type, evt.currentPointer.type);
});
// Instantiate the default behavior, providing the mapEvents object:
var behavior = new H.mapevents.Behavior(mapEvents);
// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers,'fr-FR');
/* Setting of a groupe of points (group of addresses) */
var groupePoints = new H.map.Group()
/* display list of addresses on the map */
AffichageMarqueurs(platform);
/* Center the map in order to see all the points displayed */
map.getViewModel().setLookAtData({bounds: groupePoints.getBoundingBox()});
/* If the user clicks on a marker */
groupePoints.addEventListener('tap', function (evt) {
/* Open in Filemaker a FM card model with additional info on the clicked address */
var lienFmp = "fmp://" + AdresseServeur + "/" + NomFichier + "?script=FMP - Open GPSAPP onClick"+
"&$idIntervention=" + evt.target.getData() ;
window.open(lienFmp, "_blank");
}, false);
</script>
</body>
</html>
EDIT 17/07/2020 :
Here is a screenshot from Safari web inspector showing some errors ( the page I debugged is from the link above :
