JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="https://gitcdn.xyz/repo/GustavAT/NinjaArrows.js/master/js/ninjaarrows-gmaps-v1.2_1.js"></script>
<div id="map" ></div>
CSS
#map {
height: 500px;
width: 100%;
}
JavaScript
var ninjaArrows, markers = [],
map;
var center = new google.maps.LatLng(46.642138, 14.289268);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i = 0; i < 100; i++) {
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(42 + 10 * Math.random(), 10 + 10 * Math.random()),
map: map,
title: "Random Marker " + i
}));
}
ninjaArrows = new NinjaArrows(map, markers);
ninjaArrows.setBorderOffset({
top: 25,
bottom: 10,
left: 70,
right: 0
});