В Google geochart Первое изображение показывает карту мира, где во всплывающей подсказке отсутствует название страны и цветразные.Когда второе изображение отлично нарисовано, я хочу, чтобы первое изображение было вторым.Вот как это работает. Сначала вы нажимаете на маркер страны, и он покажет клиенту этой страны.Данные из бэкенда идеальны, а при составлении карты они становятся беспорядочными.
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': "{{env('GOOGLE_MAP_API_KEY')}}"
});
google.charts.setOnLoadCallback(initMap);
function initMap() {
var country_name = $.ajax({
type: 'GET',
url: "{{ url('dashboard/getcountrynames') }}" ,
dataType: "json",
async:false,
success: function (jsondata){
}
}).responseText;
console.log(country_name);
var countries = $.parseJSON(country_name);
var data = google.visualization.arrayToDataTable(countries);
var options = {
width: 280,
height: 180,
chartArea: {'width': '90%', 'height': '100%'},
displayMode: 'markers',
sizeAxis: { minSize: 5, maxSize: 5 },
colorAxis: {colors: ['#33ADFF', '#003D66']},
datalessRegionColor: '#CDD9EA',
legend: 'none',
// tooltip: {isHtml: true}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
google.visualization.events.addListener(chart, 'select', function(e) {
var selection = chart.getSelection();
if (selection.length) {
var clickedRegion= data.getValue(selection[0].row, 0);
var JsonData = $.ajax({
type: 'GET',
url: "{{ url('dashboard/countrynametocode') }}/" + clickedRegion,
dataType: "json",
async: false,
success: function (jsondata) {
$('#country_table').hide();
$('#city_table').show();
var code = jsondata[0].fatca_code;
options.region = code;
options.resolution = "provinces";
options.showZoomOut = true;
options.keepAspectRatio = true;
options.displayMode= 'markers';
var cityname = $.ajax({
type: 'GET',
url: "{{url('dashboard/cityname')}}/" + code,
datatype: "json",
async: false,
success: function (city) {
}
}).responseText;
$.ajax({
type: 'GET',
url: "{{url('dashboard/country_name')}}/" + code,
datatype: "json",
async: false,
success: function (city) {
$('#city_table').html(city);
}
}).responseText;
var array1 = $.parseJSON(cityname);
var data1 = google.visualization.arrayToDataTable(array1);
chart.draw(data1, options);
}
}).responseText;
}
});
chart.draw(data, options);
}