Google maps remove labels or grayout area except some regions

Question

Hi i am using google map and i want your views for the following question.

is it possible to hide or grayout all the area except some other in googlemap?

if Yes, then please give me a hand for this problem.

i have tried but didn't found any solution till now.

here is my FIDDLE DEMO

in that demo i want to grayout/hide labels of all the area with no markers.

here is the sample code which i am using to pin the marker on map.

JS CODE:

<script>
var infowindow;
var map;
var myLatLng = [];

function initialize() {
    var mapOptions = {
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var bounds = new google.maps.LatLngBounds();
    var obj = {
        "JobRecord": [{
            "ApplyUrl": "test",
                "GeoLocations": {
                "GeoLocationRecord": [{
                    "Latitude": "21.543333",
                        "Longitude": "39.172777"
                }, {
                    "Latitude": "21.299135",
                        "Longitude": "40.428313"
                }]
            },
                "JobId": "493743",
                "JobTitle": "Sales Associate",
                "Locations": {
                "LocationRecord": [{
                    "Group": "Saudi Arabia",
                        "Title": "Taif"
                }, {
                    "Group": "Saudi Arabia",
                        "Title": "Jeddah"
                }]
            }
        }, {
            "ApplyUrl": "test",
                "GeoLocations": {
                "GeoLocationRecord": {
                    "Latitude": "55.755826",
                        "Longitude": "37.617300"
                }
            },
                "JobId": "492725",
                "JobTitle": "Business Director - Starbucks - Russia",
                "Locations": {
                "LocationRecord": {
                    "Group": "Russia",
                        "Title": "Moscow"
                }
            }
        }, {
            "ApplyUrl": "test",
                "GeoLocations": {
                "GeoLocationRecord": {
                    "Latitude": "25.271139",
                        "Longitude": "55.307485"
                }
            },
                "JobId": "492730",
                "JobTitle": "Vice President - Victoria's Secret",
                "Locations": {
                "LocationRecord": {
                    "Group": "UAE",
                        "Title": "Dubai"
                }
            }
        }]
    };
    var jobs = obj.JobRecord;
    for (var i = 0; i < jobs.length; i++) {
        if (jobs[i].GeoLocations.length != 0) {
            var geoLocationRecord = jobs[i].GeoLocations.GeoLocationRecord;
            var myjobs = new Array();

            var single = new Object();

            if (geoLocationRecord.length === undefined) {

                single.JobId = jobs[i].JobId;
                single.JobTitle = jobs[i].JobTitle;
                single.Locations = jobs[i].Locations.LocationRecord;

                var search = [geoLocationRecord.Latitude, geoLocationRecord.Longitude, single];
                isLocationFree(search);
            } else {
                for (var j = 0; j < geoLocationRecord.length; j++) {
                    single[j] = new Object();

                    single[j].JobId = jobs[i].JobId;
                    single[j].JobTitle = jobs[i].JobTitle;
                    single[j].Locations = jobs[i].Locations.LocationRecord[j];

                    var search = [geoLocationRecord[j].Latitude, geoLocationRecord[j].Longitude, single[j]];
                    isLocationFree(search);
                } //finish inner loop
            }
        } //finish if condition
    } //finish loop

    for (var x = 0; x < myLatLng.length; x++) {
        var latlng = new google.maps.LatLng(parseFloat(myLatLng[x][0]),
        parseFloat(myLatLng[x][1]));
        bounds.extend(latlng);

        createMarker(myLatLng[x], latlng);
    }
    map.fitBounds(bounds);
    var listener = google.maps.event.addListener(map, "idle", function () {
        if (map.getZoom() > 16) map.setZoom(3);
        google.maps.event.removeListener(listener);
    });
}

function createMarker(jobs, latlng) {
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    google.maps.event.addListener(marker, "click", function () {
        if (infowindow) infowindow.close();
        infowindow = new google.maps.InfoWindow({
            content: createMessage(jobs)
        });
        infowindow.open(map, marker);
    });
    return marker;
}

function createMessage(jobs) {
    console.log(jobs);
    console.log("Total==>" + (Number(jobs.length) - 2));

    if (jobs[2].Locations !== undefined) {
        var locationTitle = jobs[2].Locations.Title;
    } else {
        var locationTitle = "";
    }

    var message = '';
    message += '<div id="popupContent">' +
        '<strong id="firstHeading" class="firstHeading">' + (Number(jobs.length) - 2) + " Vacancies in " + locationTitle + '</strong>' +
        '<br><br>';
    for (var y = 2; y < jobs.length; y++) {
        message += '<a href="http://jobsearch.alshaya.com/cau/en/job/' + jobs[y].JobId + '" target="_blank">' + jobs[y].JobTitle + '</a><br>';

    }
    message += '</div>';

    return message;
}

function isLocationFree(search) {
    for (var i = 0; i < myLatLng.length; i++) {
        if (myLatLng[i][0] === search[0] && myLatLng[i][1] === search[1]) {
            myLatLng[i].push(search[2]);
            return true;
        }
    }
    myLatLng.push(search);
    return myLatLng;
}
$(document).ready(function () {
    initialize();
});
</script>

Answer 1

You can do that quite easily by using a Fusion Table Layer.

I consider here the mentioned "area" or "regions" as countries - I guess you simply want to gray out the countries that is not present in your XML-feed?

Here I have hardcoded the countries from your example - Russia, Saudia Arabia and United Arab Emirates. You must yourself create the logic to exclude the countries you meet in your feed.

function greyoutWorld() {
    var world_geometry = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
            //select all but russia, saudi arabia and united arab emirates
            where: "ISO_2DIGIT NOT IN ('RU', 'SA', 'AE')"
        },
        //add some grey color to cover the rest of the world
        styles: [{
            polygonOptions: {
                fillColor: "#dadada",
                strokeColor: "#ebebeb",
                strokeWeight: "int"
            },
            polylineOptions: {
                strokeColor: "#rrggbb",
                strokeWeight: "int"  
            }
        }],
        map: map,
        suppressInfoWindows: true
    });
}

The result looks like this :

Forked fiddle -> http://jsfiddle.net/QUPdZ/

---

Update

Regarding the "red circle markers", this feature is built into the Fusion Table layer code, and cannot be suppressed. See the documentation, under "Limits" :

When looking at the map, you may notice:
* The ten largest-area components of a multi-geometry are shown.
* When zoomed farther out, tables with more than 500 features will show dots (not lines or polygons).

The workaround is to add

minZoom: 2

to the map options, like in this fiddle -> http://jsfiddle.net/LVRp2/

The country geometry Fusion Table - World Country Boundaries.kml - is public and accessible here :

https://www.google.com/fusiontables/DataSource?docid=1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk.

An alternative, same source I guess - World Country Boundaries.csv - can be found here :

https://www.google.com/fusiontables/DataSource?docid=1uL8KJV0bMb7A8-SkrIe0ko2DMtSypHX52DatEE4.

Both works with the above fiddle.