<script type="text/javascript">
$(function(){
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': '{!! $apiKey !!}'
});
google.charts.setOnLoadCallback(drawMap);
});
function drawMap(){
var zoneData = {!! json_encode($zoneData) !!};
zoneData.unshift(['Address', 'Name', 'accountID']);
var data = google.visualization.arrayToDataTable(zoneData);
var options = {
displayMode: 'markers',
region: 'US',
legend: 'none',
colorAxis: {colors: ['#4374e0', '#4374e0']},
sizeAxis: {minSize: 5, maxSize: 5}
};
var view = new google.visualization.DataView(data);
view.setColumns([1]);
var chart = new google.visualization.GeoChart(document.getElementById('accountMap'));
google.visualization.events.addListener(chart, 'select', function(){
var selection = chart.getSelection();
if(selection.length > 0){
var url = '{{route('account.details.route', 'ACCOUNT_ID')}}';
var accountID = data.getValue(selection[0].row, 2);
url = url.replace('ACCOUNT_ID', accountID);
window.open(url, '_blank');
}
});
chart.draw(view, options);
}
</script>