Regioes brasileiras

by NicosKaralis

HTML

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

CSS

html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    #map {
      height: 100%;
    }

JavaScript

var map;
var infoWindow;

var initMap = function() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -14.235004,
      lng: -51.92528
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  addStates();
}

var addRectangle = function(name, bounds) {
  rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: bounds
  });
  infoWindow = new google.maps.InfoWindow({
    disableAutoPan: true,
    position: rectangle.getBounds().getCenter()
  });
  infoWindow.setContent(name);
  infoWindow.open(map);
}

var addStates = function() {
  addRectangle("Acre", {
    north: -7.111826799999999,
    south: -11.1452221,
    east: -66.62407089999999,
    west: -73.9915154
  });
  addRectangle("Alagoas", {
    north: -8.8131293,
    south: -10.5037706,
    east: -35.1391908,
    west: -38.2374754
  });
  addRectangle("Amapá", {
    north: 4.4431666,
    south: -1.2361787,
    east: -49.8565358,
    west: -54.8762441
  });
  addRectangle("Amazonas", {
    north: 2.246628,
    south: -9.8180491,
    east: -56.0975519,
    west: -73.8015533
  });
  addRectangle("Bahia", {
    north: -8.5328229,
    south: -18.3359755,
    east: -37.3480414,
    west: -46.6170906
  });
  addRectangle("Ceará", {
    north: -2.7842472,
    south: -7.858185100000001,
    east: -37.2530223,
    west: -41.4235126
  });
  addRectangle("Distrito Federal", {
    north: -15.5001712,
    south: -16.0517624,
    east: -47.3081926,
    west: -48.2870947
  });
  addRectangle("Espírito Santo", {
    north: -17.891947,
    south: -21.3096583,
    east: -28.8359374,
    west: -41.8797894
  });
  addRectangle("Goiás", {
    north: -12.3952134,
    south: -19.4991531,
    east: -45.906962,
    west: -53.2512032
  });
  addRectangle("Maranhão", {
    north: -1.046719,
    south: -10.2617676,
    east: -41.7843211,
    west:...