Is there a way to display a single country in Google map? It should be only one country, not parts from other countries included

后端未结

关注

 6  1540

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 dis

相关标签:

6条回答

时光取名叫无心

2020-12-04 22:02

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Mapping</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        #map {
            border: 2px solid #333;
            width: 80vw;
            height: 80vh;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script src="./keys.js"></script>
    <script>
        let map;
        document.addEventListener("DOMContentLoaded", () => {
            let s = document.createElement("script");
            document.head.appendChild(s);
            s.addEventListener("load", () => {
                //script has loaded
                console.log("script has loaded");
                map = new google.maps.Map(document.getElementById("map"), {
                    center: {
                        lat: 45.3496711,
                        lng: -75.7569551
                    },
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
            });
            s.src = `https://maps.googleapis.com/maps/api/js?key=${MAPKEY}`;
        });
    </script>
</body>

</html>

0 讨论(0)

忘掉有多难

2020-12-04 22:07
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');
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
青春惊慌失措

2020-12-04 22:10

I think better /no flash/ but svg solution is geo charts by google: https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=pl

you can play it with here:

https://code.google.com/apis/ajax/playground/?type=visualization&hl=pl#geo_chart

Other countries are dimmed so it may feet your needs

0 讨论(0)
发布评论:

提交评论
- 加载中...
悲哀的现实

2020-12-04 22:20

You can do it using Fusion Tables too.

http://www.geocodezip.com/geoxml3_test/v3_FusionTables_query_sidebarF_local.html?country=India

Regards

0 讨论(0)
发布评论:

提交评论
- 加载中...
不要未来只要你来

2020-12-04 22:24

I have been looking for a google maps solution as well and so far the closest thing that I found is to display a chart of a specific country have a look at: http://code.google.com/apis/chart/interactive/docs/gallery/geomap.html. Have a look also at this question: Can I show a single country (masked out) in GoogleMaps?

0 讨论(0)
发布评论:

提交评论
- 加载中...

遇见更好的自我

2020-12-04 22:27

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" }
    ]
    }
  ]
};

0 讨论(0)