2

I am very new to developing, just finished an online bootcamp on Udemy and have created few simple websites, a yelp-type app, and few other minor coding projects.

I am currently working on a "travel map" app which will allow users to add countries that they have visited and it will render a map where the countries that they have been to are highlighted.

I am working with node.js mongodb and mongoose.

After some research I have decided to use google maps API geochart(visualization).

The map show's up fine on the page and whatever country I add gets highlighted as expected.

What I am trying to figure out is how to take the data from the mongodb and fill the "var data". This has to by dynamic as the data will be different depending on the user that is logged in.

I currently have the following code in my header.ejs inside the to link the API and my front-end javascript file:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="/javascript/script.js"></script>

Just this one line in my index.ejs file:

<div id="regions_div" style="width: 900px; height: 500px;"></div>

And the following in my script.js file:

google.charts.load('current', {
        'packages':['geochart'],
        'mapsApiKey': 'MY_API_KEY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
            ['Country'],
            //the data has to go here   
        ]);


        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
evan
  • 5,443
  • 2
  • 11
  • 20
  • you can use ajax to get data from the db and add it to the chart, [this answer](https://stackoverflow.com/a/20322272/5090771) might help... – WhiteHat Oct 11 '19 at 17:24

0 Answers0