Home Google Map How to show Google Map for particular Country with selected Provinces?

How to show Google Map for particular Country with selected Provinces?

by therichpost
15 comments
How to show Google Map for particular Country with selected Provinces

Hello to all, welcome to therichpost.com. Today In this post, I will show, How to show Google Map for particular Country with selected Provinces?

If you new in Google map or you want know more about it then you can check my posts related to Google Maps.

This post is very interesting and I am hoping, you will all like this also very much.

How to show Google Map for particular Country with selected Provinces

Here is the working code and you can add this into your html file:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
            ['Regions', 'Popularity'],
            ['New York', 200],
            ['Texas', 500],
            ['California', 600]
            
        ]);

         var options = {};
         options['region'] = 'US';
         options['resolution'] = 'provinces';
         

        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>

If you have any query or you want more advance code related to this, then you can comment below or ask question.

Thank you,

Harjas,

TheRichPost

You may also like

15 comments

Curious January 16, 2019 - 6:46 am

Hi, Can we use this in Angular?

Reply
Ajay Malhotra January 18, 2019 - 10:26 am

yes we can

Reply
Jasmeen kaur January 23, 2019 - 4:29 am

Thank you for this post.

Reply
Ajay Malhotra January 23, 2019 - 4:19 pm

Your most welcome

Reply
Hasviny rao May 7, 2020 - 4:33 am

Hi. How about Malaysian cities? Can we add? Because I couldn’t find the city code.

Reply
Ajay Malhotra May 7, 2020 - 4:35 am

May be with help of lat long.

Reply
Utkarsh March 2, 2021 - 3:39 pm

how to incorporate this in angular

Reply
Ajay Malhotra March 2, 2021 - 3:43 pm

Yes I have example on this.

Reply
Utkarsh March 2, 2021 - 3:53 pm

plz share, as i’m stuck over this for several hours

Reply
Utkarsh March 2, 2021 - 3:46 pm

plz share…as I’m stuck over this for several hours

Reply
Utkarsh March 2, 2021 - 3:49 pm

plz share, as i’m stuck over this for several hours

Reply
Ajay Malhotra March 2, 2021 - 3:51 pm

Please search via blog search, thanks.

Reply
Utkarsh March 2, 2021 - 3:54 pm

please provide a link

Reply
Utkarsh March 2, 2021 - 3:58 pm

Please share the link, i’m unable to find it.

Reply
Utkarsh March 2, 2021 - 4:03 pm

please share the link as i’m unable to find it

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.