javascript - Country boundries using Google Map API v3

Question

Is there anyway so I can get boundries of countries in polygon coordinates value using Google map API.

Answer 1

If you want more control over the displayed boundaries, I suggest using google.maps.Data layer instead of Fusion Tables. Fusion tables and Fusion Layer has their limitations, for example on the World Map in geocodezip's example you can see, that if you zoom out the map, the boundaries will collapse to points. With Data Layer you can style specific boundaries, or hide them. Fusion Layer allows only conditional style changes. You can also add your own click, mouseover, mouseout listeners, you can change the boundary layer on the fly and more. Of course sometimes Fusion Layer is better alternative, for example if you have data contained in Fusion Tables, but if you want more control Data Layer is more than worthy alternative.

In my next working example I show World Country and US States boundaries rendered using Data Layeras example. You can of course use your own boundary files. If you don't have GeoJson version available (only Shapefiles or KML files), you can convert them to GeoJson using utilities like mapshaper (simply run: mapshaper -i myshp.shp -o format=geojson out.geo.json)

var map = null;
  var my_boundaries = {};
  var data_layer;
  var info_window;

  //initialize map on document ready
  $(document).ready(function(){
  var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup
  var myOptions = {
  zoom: 2,
  center: latlng,
  mapTypeControl: true,
  mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  navigationControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  google.maps.event.addListener(map, 'click', function(){
  if(info_window){
  info_window.setMap(null);
  info_window = null;
  }
  });

$('#boundary_load_select').change(function(){
if($(this).val()==1){
loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/world.countries.geo.json");
}else{
loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/us.states.geo.json");
}
});
loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/world.countries.geo.json");
  });

  function initializeDataLayer(){
if(data_layer){
data_layer.forEach(function(feature) {
    data_layer.remove(feature);
});
data_layer = null;
}
data_layer = new google.maps.Data({map: map}); //initialize data layer which contains the boundaries. It's possible to have multiple data layers on one map
  data_layer.setStyle({ //using set style we can set styles for all boundaries at once
  fillColor: 'white',
  strokeWeight: 1,
  fillOpacity: 0.1
  });

  data_layer.addListener('click', function(e) { //we can listen for a boundary click and identify boundary based on e.feature.getProperty('boundary_id'); we set when adding boundary to data layer
  var boundary_id = e.feature.getProperty('boundary_id');
  var boundary_name = "NOT SET";
  if(boundary_id && my_boundaries[boundary_id] && my_boundaries[boundary_id].name) boundary_name = my_boundaries[boundary_id].name;
  if(info_window){
  info_window.setMap(null);
  info_window = null;
  }
  info_window = new google.maps.InfoWindow({
  content: '<div>You have clicked a boundary: <span style="color:red;">' + boundary_name + '</span></div>',
  size: new google.maps.Size(150,50),
  position: e.latLng, map: map
  });
  });

data_layer.addListener('mouseover', function(e) {
data_layer.overrideStyle(e.feature, {
strokeWeight: 3,
strokeColor: '#ff0000'
});
});

data_layer.addListener('mouseout', function(e) {
data_layer.overrideStyle(e.feature, {
strokeWeight: 1,
strokeColor: ''
});
});
  }

  function loadBoundariesFromGeoJson(geo_json_url){
initializeDataLayer();
  $.getJSON(geo_json_url, function(data){
  if(data.type == "FeatureCollection"){ //we have a collection of boundaries in geojson format
  if(data.features){
  for(var i = 0; i < data.features.length; i++){
var boundary_id = i + 1;
  var new_boundary = {};
  if(!data.features[i].properties) data.features[i].properties = {}; 
data.features[i].properties.boundary_id = boundary_id; //we will use this id to identify boundary later when clicking on it
  data_layer.addGeoJson(data.features[i], {idPropertyName: 'boundary_id'});
new_boundary.feature = data_layer.getFeatureById(boundary_id);
  if(data.features[i].properties.name) new_boundary.name = data.features[i].properties.name;
if(data.features[i].properties.NAME) new_boundary.name = data.features[i].properties.NAME;
  my_boundaries[boundary_id] = new_boundary;
  }
  }
if(my_boundaries[24]){ //just an example, that you can change styles of individual boundary
data_layer.overrideStyle(my_boundaries[24].feature, {
fillColor: '#0000FF',
fillOpacity: 0.9
});
}
  }
  });
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body style="margin:0px; padding:0px;" >
<select id="boundary_load_select">
<option value="1">Load World Boundaries</option>
<option value="2">Load US States Boundaries</option>
</select>
<div id="map_canvas" style="height:400px; width:500px;"></div>
</body>