Images as pins
In this example, we are using images as pins instead of svg.
$(function() {
window.JSMaps.maps.usa = {
...window.JSMaps.maps.usa,
pins: [
{
"enable": true,
"name": "Airport 1",
"xPos": 188,
"yPos": 241,
"src": "./images/airport-icon.png",
"srcWidth": 594,
"srcHeight": 595,
"pinWidth": 40,
"url": "https://jsmaps.io",
"text": "<h1>Airport 1</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>"
},
{
"enable": true,
"name": "Airport 2",
"xPos": 388,
"yPos": 141,
"src": "./images/airport-icon.png",
"srcWidth": 594,
"srcHeight": 595,
"pinWidth": 40,
"url": "https://jsmaps.io",
"text": "<h1>Airport 2</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>"
}
]
}
$('#jsmap').JSMaps({
map: 'usa'
});
});
Code was copied successfully!