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.

Answer 2

I have achieved this in v2 of googlemaps by overlaying a shape overlay (i.e. a polygon that encompasses the whole world BUT the area I want shown).

In the end my area was fairly complex so I ended up generating it with google maps and saving the shape in a separate .kmz file, you will be able to achieve the result both ways.

Here is a fiddle of adding the perimeter one coordinate pair at a time.

The KmlLayer function allows you to load a .kmz you have generated from google map; see also this answer on Stackoverflow: Using KMZ Files in Google Maps

In google maps, follow this tutorial to generate the kml

Answer 3

Let's make a recap here.

While you have a few solutions explained here, they all require external data that btw. is hard to maintain and incomplete (I still could not find a Fusion Table world boundaries dataset that is complete).

I personnaly don't think this is a good way of "highlighting" where the positions are, and I think this is overcomplicated.

Another possibility would be to use a marker clusterer which is very good to highlight where most of your positions are. And it's easy to implement.

What we don't know is what features you need from the Google Maps API. Maybe you should consider using another service that might allow easier manipulation of boundaries data. Did you already check jVectorMap for instance?

I know my answer is not really a solution to your question, but it might help you ask yourself the right question: Is greying out some areas on the map the best option to highlight where the positions are?