I am wanting to embed an interactive Map on my Wix page that toggles a box with corresponding information. This is a link to exactly what I am wanting to do --> https://www.soccershotsfranchising.com/available-territories/
I need help understanding how to connect the action that is sent out from the html element to a small data base of information on wix.
The code for my map is -->
<script src='https://maps.googleapis.com/maps/api/js?key=undefined' type='text/javascript'></script><script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>google.charts.load('42', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip', p:{html:true}});var ivalue = new Array();
data.addRows([[{v:'US-AK',f:'Alaska'},0,'']]);
ivalue['US-AK'] = '';
data.addRows([[{v:'US-AL',f:'Alabama'},1,'']]);
ivalue['US-AL'] = '';
data.addRows([[{v:'US-AR',f:'Arkansas'},2,'']]);
ivalue['US-AR'] = '';
data.addRows([[{v:'US-AZ',f:'Arizona'},3,'']]);
ivalue['US-AZ'] = '';
data.addRows([[{v:'US-CA',f:'California'},4,'View Listings']]);
ivalue['US-CA'] = 'https://www.bizbuysell.com/Business-Opportunity/Big-O-Tires-Opportunity-in-the-County-of-Riverside-CA/1544264/?d=/wEFaSUyZmNhbGlmb3JuaWElMmZhdXRvbW90aXZlLWFuZC1ib2F0LWJ1c2luZXNzZXMtZm9yLXNhbGUlMmYlM2ZxJTNkJTJmd0VGRm1seVBURW1hejFDYVdjclR5WnVQU1p6Y0dsa1BUUSUzZA==';
data.addRows([[{v:'US-CO',f:'Colorado'},5,'']]);
ivalue['US-CO'] = '';
data.addRows([[{v:'US-CT',f:'Connecticut'},6,'']]);
ivalue['US-CT'] = '';
data.addRows([[{v:'US-DE',f:'Delaware'},7,'']]);
ivalue['US-DE'] = '';
data.addRows([[{v:'US-FL',f:'Florida'},8,'']]);
ivalue['US-FL'] = '';
data.addRows([[{v:'US-GA',f:'Georgia'},9,'']]);
ivalue['US-GA'] = '';
data.addRows([[{v:'US-HI',f:'Hawaii'},10,'']]);
ivalue['US-HI'] = '';
data.addRows([[{v:'US-IA',f:'Iowa'},11,'']]);
ivalue['US-IA'] = '';
data.addRows([[{v:'US-ID',f:'Idaho'},12,'']]);
ivalue['US-ID'] = '';
data.addRows([[{v:'US-IL',f:'Illinois'},13,'']]);
ivalue['US-IL'] = '';
data.addRows([[{v:'US-IN',f:'Indiana'},14,'']]);
ivalue['US-IN'] = '';
data.addRows([[{v:'US-KS',f:'Kansas'},15,'']]);
ivalue['US-KS'] = '';
data.addRows([[{v:'US-KY',f:'Kentucky'},16,'']]);
ivalue['US-KY'] = '';
data.addRows([[{v:'US-LA',f:'Louisiana'},17,'']]);
ivalue['US-LA'] = '';
data.addRows([[{v:'US-MA',f:'Massachusetts'},18,'']]);
ivalue['US-MA'] = '';
data.addRows([[{v:'US-MD',f:'Maryland'},19,'']]);
ivalue['US-MD'] = '';
data.addRows([[{v:'US-ME',f:'Maine'},20,'']]);
ivalue['US-ME'] = '';
data.addRows([[{v:'US-MI',f:'Michigan'},21,'']]);
ivalue['US-MI'] = '';
data.addRows([[{v:'US-MN',f:'Minnesota'},22,'']]);
ivalue['US-MN'] = '';
data.addRows([[{v:'US-MO',f:'Missouri'},23,'']]);
ivalue['US-MO'] = '';
data.addRows([[{v:'US-MS',f:'Mississippi'},24,'']]);
ivalue['US-MS'] = '';
data.addRows([[{v:'US-MT',f:'Montana'},25,'']]);
ivalue['US-MT'] = '';
data.addRows([[{v:'US-NC',f:'North Carolina'},26,'']]);
ivalue['US-NC'] = '';
data.addRows([[{v:'US-ND',f:'North Dakota'},27,'']]);
ivalue['US-ND'] = '';
data.addRows([[{v:'US-NE',f:'Nebraska'},28,'']]);
ivalue['US-NE'] = '';
data.addRows([[{v:'US-NH',f:'New Hampshire'},29,'']]);
ivalue['US-NH'] = '';
data.addRows([[{v:'US-NJ',f:'New Jersey'},30,'']]);
ivalue['US-NJ'] = '';
data.addRows([[{v:'US-NM',f:'New Mexico'},31,'']]);
ivalue['US-NM'] = '';
data.addRows([[{v:'US-NV',f:'Nevada'},32,'']]);
ivalue['US-NV'] = '';
data.addRows([[{v:'US-NY',f:'New York'},33,'']]);
ivalue['US-NY'] = '';
data.addRows([[{v:'US-OH',f:'Ohio'},34,'']]);
ivalue['US-OH'] = '';
data.addRows([[{v:'US-OK',f:'Oklahoma'},35,'']]);
ivalue['US-OK'] = '';
data.addRows([[{v:'US-OR',f:'Oregon'},36,'']]);
ivalue['US-OR'] = '';
data.addRows([[{v:'US-PA',f:'Pennsylvania'},37,'']]);
ivalue['US-PA'] = '';
data.addRows([[{v:'US-RI',f:'Rhode Island'},38,'']]);
ivalue['US-RI'] = '';
data.addRows([[{v:'US-SC',f:'South Carolina'},39,'']]);
ivalue['US-SC'] = '';
data.addRows([[{v:'US-SD',f:'South Dakota'},40,'']]);
ivalue['US-SD'] = '';
data.addRows([[{v:'US-TN',f:'Tennessee'},41,'']]);
ivalue['US-TN'] = '';
data.addRows([[{v:'US-TX',f:'Texas'},42,'']]);
ivalue['US-TX'] = '';
data.addRows([[{v:'US-UT',f:'Utah'},43,'']]);
ivalue['US-UT'] = '';
data.addRows([[{v:'US-VA',f:'Virginia'},44,'']]);
ivalue['US-VA'] = '';
data.addRows([[{v:'US-VT',f:'Vermont'},45,'']]);
ivalue['US-VT'] = '';
data.addRows([[{v:'US-WA',f:'Washington'},46,'']]);
ivalue['US-WA'] = '';
data.addRows([[{v:'US-WI',f:'Wisconsin'},47,'']]);
ivalue['US-WI'] = '';
data.addRows([[{v:'US-WV',f:'West Virginia'},48,'']]);
ivalue['US-WV'] = '';
data.addRows([[{v:'US-WY',f:'Wyoming'},49,'']]);
ivalue['US-WY'] = '';
var options = {
backgroundColor: {fill:'#000000',stroke:'#FFFFFF' ,strokeWidth:0 },
colorAxis: {minValue: 0, maxValue: 49, colors: ['#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#96181A','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7','#F7F7F7']},
legend: 'none',
datalessRegionColor: '#F7F7F7',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'provinces',
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
region:'US',
keepAspectRatio: true,
width:600,
height:400,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: true}
};
var chart = new google.visualization.GeoChart(document.getElementById('map_1537381399024'));
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length == 1) {
var selectedRow = selection[0].row;
var selectedRegion = data.getValue(selectedRow, 0);
if(ivalue[selectedRegion] != '') { }
}
});
chart.draw(data, options);
}
</script>
<div id='map_1537381399024'></div>
Hi,
You can transfer information between the HTML component and the site code using massaging, check out more about it here.