43

I need to display only a single country in google map. I need to display only one country and the parts of other countries should not be there.. for example if I want to display U.K. it should display only UK and sea around, no parts from other countries should be visible.

Is there a Google API call or any other method? I couldn't find a method than overriding zoom and overriding the methods they can navigate over the region (scrolling events).

Does anyone know a method to do this?

Kara
  • 6,115
  • 16
  • 50
  • 57
Pasan Indeewara
  • 511
  • 1
  • 4
  • 7

3 Answers3

18

If you disable all map elements and then a add new layer (a single country), then only one country is visible. Here is a jsfiddle https://jsfiddle.net/gvvy5vxz/2/

function initialize() {
    var mapOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    backgroundColor: '#FFF',
    disableDefaultUI: true,
    draggable: false,
    scaleControl: false,
    scrollwheel: false,
    styles: [
    {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
    },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "off" }
    ]
    },{
    "featureType": "road",
    "stylers": [
      { "visibility": "off" }
    ]
    },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
    },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
    },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
    },{
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
    }
  ]
};

Example

Mika
  • 1,112
  • 4
  • 15
  • 30
  • 1
    This is an interesting solution, but it requires a separate resource (in this case it requires a map image of the country that you only want to show). Plus this didn't get rid of the water. – Mike Kormendy Aug 09 '17 at 13:08
  • How to find out another country coordinates? – vol4ikman Jul 22 '23 at 16:29
  • @vol4ikman you can just click any point on Google Maps and it will show the coordinates. – Mika Jul 27 '23 at 12:50
7

I was looking for the same thing and ended up using polygon overlay.

Relevant code is under "here is the magic" comment.

Zoom out all the way and you will see the giant white square. This is the 0th index of the array in the json file (linked in map.data.loadGeoJson) "[[-147, 2], [-150, 70], [-20, 68], [-31, 5], [-147, 2]]", the next index is the border coordinate points of the region you're interested in.

Search for "kml {country/city/state/region name}" in google and you'll probably find all that data with the border outline points.

https://jsfiddle.net/jmao2o3o/3/

//here is the magic
map.data.loadGeoJson('https://bitbucket.org/dimaboychev/public/raw/9bb53aba0d70875a6d2d9bd2a1eec65671ce4ae3/dc.json');
Dmitry Boychev
  • 151
  • 1
  • 8
  • Note that for the square you got 5 points, that is because you have to connect to the first point. "[[-147, 2], [-150, 70], [-20, 68], [-31, 5], [-147, 2]]". Last point has to match the first one. – Dmitry Boychev Oct 19 '16 at 15:31
  • So you're saying you searched for this kml data in google? you didn't generate it somewhere? Trying to do the same but just show California—can't find any good resources. Appreciate any pointers. – RooWM Jan 26 '17 at 17:27
  • Here you can find the California's border KML data file, look for cageol.kml file in the page https://mrdata.usgs.gov/geology/state/state.php?state=CA – Dmitry Boychev Feb 10 '17 at 22:27
  • Thanks @dmitry How would I go about getting just the outline and create the JSON file like you have? Then I would just need to update that in your example with a the appropriate coordinates? – RooWM Feb 13 '17 at 21:01
  • yes, it can be tricky though. take a look, this is closer to what you may need https://jsfiddle.net/jmao2o3o/25/ I got the points in json format from http://eric.clst.org/Stuff/USGeoJSON if you need more accuracy pick the "5m" file. I got the 500k file so its not that many points. What you need to do now is set the outer overlay array – Dmitry Boychev Feb 15 '17 at 22:26
  • much appreciated, guess I can also just style the map to have everything be invisible, and just use the overlay as the map of CA. – RooWM Feb 16 '17 at 04:15
  • https://developers.google.com/maps/documentation/javascript/examples/layer-data-polygon take a look at google docs... they also have a drag and drop geojson file into the map and it highlights the area. BTW, originally what I had is a polygon with a hole (Washington DC) in it, just like per the link above. – Dmitry Boychev Feb 16 '17 at 17:12
0

Even I had a similar requirement, and after a lot of searching, I found this

<style>
        #visualization svg path[fill^='none'] {
            stroke-width: 0px;
        }
</style>

[Note: #visualization is the id of the tag where we render the graph.]

It basically, decreases the stroke width for other countries, also do not forget to put this

var options = {
                ...,
                ...,
                datalessRegionColor: 'transparent',
                ...,
                ...
            };

in the options part of the visualization.

Shreyas Vedpathak
  • 380
  • 4
  • 11