Google Maps - Setting Countries to a Color and if I click on it links to a page

Question

I want to set particular countries to a certain color and then if the user clicks on it, it will open a small window with some text/links.

Below is the code I have until now:

        <style>
          #map_canvas {
            width: 100%;
            height: 500px;
          }
        </style>

        <script src="https://maps.googleapis.com/maps/api/js"></script>

        <script>
          function initialize() {
            var map_canvas = document.getElementById('map_canvas');

            var map_options = {
              center: new google.maps.LatLng(22.6006017, -3.845206),
              zoom: 2,
              scrollwheel: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP

            }

            var map = new google.maps.Map(map_canvas, map_options)

            google.maps.event.addListener(map, 'click', function(event){
                this.setOptions({scrollwheel:true});
            });

            google.maps.event.addListener(map, 'mouseout', function(event){
                this.setOptions({scrollwheel:false});  
            });
          }

          google.maps.event.addDomListener(window, 'load', initialize);
        </script>

        <div id="map_canvas"></div>

</div>

Answer 1

In v3 Google maps API consider using the KML style override example in the SO conversation below.

How to override KML colors in Google Map?