How do you make a map with clickable countries in Angular 2?

google-maps angular typescript google-maps-api-3 geocoding

10,239

A geochart is a map of a country, a continent, or a region with areas identified in one of three ways:

The region mode colors whole regions, such as countries, provinces, or states.

The markers mode uses circles to designate regions that are scaled according to a value that you specify.

The text mode labels the regions with identifiers (e.g., "Russia" or "Asia"). A geochart is rendered within the browser using SVG or VML. Note that the geochart is not scrollable or draggable, and it's a line drawing rather than a terrain map; if you want any of that, consider a map visualization instead.

Here is the sample code:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

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

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

You could also check the following for code implementation:

Hope this helps.

10,239

Author by

universesurfer

Updated on June 04, 2022

Comments

universesurfer almost 2 years
So far I have this:
```
<div class="map col-xs-12">
          <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">

            <sebm-map-polygon [paths]="paths"></sebm-map-polygon>

          </sebm-google-map>
</div>
```
It gives me a square polygon on the map. But the idea is to have a map with clickable countries (that is, each country click will trigger an event and return some data).

I just started using the sebm google map for Angular 2, but it seems like the documentation is somewhat lacking in specifics.

I'm new to Angular and unsure how to approach this. Would you recommend using the sebm-map-polygon with the geojson data for all of the countries?

Sorry I know this is a general question, but figure it could be valuable in the context of Angular 2.