I am trying to place the OSM map on the category page with location marker. For this purpouse I have created template module, but it is not load a map on the page. On the page is just gray square with zoom button and “Contributors” inscription from my code.
The layout file: /customtheme/Magento_Catalog/layout/catalog_category_view.xml
The java requirejs file: /customtheme/requirejs-config.js
var config = {
map: {
‘*’ : {
‘map’ : ‘js/map’
}
}
};
The javascript file: customtheme/web/js/map.js:
define(‘jquery’, function($) {
$.fn.InitMap = function() {
var planes = [
["RS Grestina",-6.208763,106.845599],
["Stasiun",-6.210165,106.850002]
];
var map = L.map('map').setView([-6.208763, 106.845599], 8);
mapLink =
'OpenStreetMap';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
for (var i = 0; i < planes.length; i++) {
console.log(planes[i][1]);
marker = new L.marker([planes[i][1],planes[i][2]])
.bindPopup(planes[i][0])
.addTo(map);
}
}
}(jQuery)
);
The template file: /customtheme/Magento_Catalog/templates/category/map.phtml
//
Can you check the code where I make a mistake?