Límites de país usando Google Map API v3

Question

¿Hay alguna forma? Así puedo obtener límites de países en el valor de las coordenadas del polígono usando la API del mapa de Google.

Answer 1

Ver esta pregunta similar: Google Maps V3: Draw German State Polygons?

El conjunto de datos Natural Earth en fusiontables tiene polígonos países disponibles en ella. Puede darles el estilo que desee.

que lo utilizaron para crear este ejemplo: http://www.geocodezip.com/v3_FusionTablesLayer_worldmap_linkto.html

Aquí se muestra un ejemplo que utiliza un KmlLayer: http://www.geocodezip.com/v3_GoogleEx_layer-kml_world_countries_simple.html

fragmento de código:

var kmlLayer = null; 
 
var map = null; 
 

 
function openIW(layerEvt) { 
 
    if (layerEvt.row) { 
 
    var content = layerEvt.row['admin'].value; 
 
    } else if (layerEvt.featureData) { 
 
    var content = layerEvt.featureData.name; 
 
    } 
 
    document.getElementById('info').innerHTML = "you clicked on:<br>" + content; 
 
} 
 

 
function initialize() { 
 
    var chicago = new google.maps.LatLng(36.4278, -15.9); 
 
    var myOptions = { 
 
    zoom: 0, 
 
    center: chicago, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 

 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 

 
    google.maps.event.addListener(map, "click", function() { 
 
    document.getElementById('info').innerHTML = ""; 
 
    }); 
 

 

 
    kmlLayer = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/world_countries_kml.xml', { 
 
    preserveViewport: true, 
 
    suppressInfoWindows: true 
 
    }); 
 
    kmlLayer.setMap(map); 
 

 
    google.maps.event.addListener(kmlLayer, 'click', openIW); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <div id="map_canvas" style="height:200px; width:300px;"></div> 
 
    </td> 
 
    <td> 
 
     <div id="info"></div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Supongo que al obtener los límites, desea dibujar un polígono en sus bordes. Para eso debes conocer las coordenadas que te ayudarán a dibujar el polígono. He hecho esto solo por nosotros. Tengo todas las coordenadas de todos los estados. Y dibujo un polígono en cada estado. Eso hace que Estados Unidos destaque.

Usted puede ver mi esto question para la solución de los EEUU Pero para otros países, debe necesitar conocer las coordenadas.

Answer 3

Si desea tener más control sobre los límites mostrados, le sugiero que use la capa google.maps.Data en lugar de Fusion Tables. Las tablas Fusion y Fusion Layer tienen sus limitaciones, por ejemplo, en el mapa mundial en el ejemplo de geocodezip puede ver, que si aleja el mapa, los límites se colapsarán en puntos. Con Data Layer puede diseñar límites específicos u ocultarlos. Fusion Layer solo permite cambios de estilo condicional. También puede agregar sus propios oyentes click, mouseover, mouseout, puede cambiar la capa límite sobre la marcha y más. Por supuesto, a veces Fusion Layer es una mejor alternativa, por ejemplo, si tiene datos contenidos en Fusion Tables, pero si desea más control Data Layer es una alternativa más que digna.

En mi siguiente ejemplo de trabajo, muestro los límites de Estados Unidos y Estados Unidos representados usando Data Layer como ejemplo. Por supuesto, puede usar sus propios archivos de límites. Si no tiene la versión GeoJSON disponibles (sólo archivos de forma o archivos KML), puede convertirlos a GeoJSON utilizando utilidades como mapshaper (sólo tiene que ejecutar: 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(){ 
 
    \t var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup 
 
    \t var myOptions = { 
 
    \t \t zoom: 2, 
 
    \t \t center: latlng, 
 
    \t \t mapTypeControl: true, 
 
    \t \t mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
 
    \t \t navigationControl: true, 
 
    \t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    \t }; 
 
    \t map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
    \t google.maps.event.addListener(map, 'click', function(){ 
 
    \t \t if(info_window){ 
 
    \t \t \t info_window.setMap(null); 
 
    \t \t \t info_window = null; 
 
    \t \t } 
 
    \t }); 
 
\t 
 
\t $('#boundary_load_select').change(function(){ 
 
\t \t if($(this).val()==1){ 
 
\t \t \t loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/world.countries.geo.json"); 
 
\t \t }else{ 
 
\t \t \t loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/us.states.geo.json"); 
 
\t \t } 
 
\t }); 
 
\t loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/world.countries.geo.json"); 
 
    }); 
 

 
    function initializeDataLayer(){ 
 
\t if(data_layer){ 
 
\t \t data_layer.forEach(function(feature) { 
 
\t \t  data_layer.remove(feature); 
 
\t \t }); 
 
\t \t data_layer = null; 
 
\t } 
 
\t 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 
 
    \t data_layer.setStyle({ //using set style we can set styles for all boundaries at once 
 
    \t \t fillColor: 'white', 
 
    \t \t strokeWeight: 1, 
 
    \t \t fillOpacity: 0.1 
 
    \t }); 
 

 
    \t 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 
 
    \t \t var boundary_id = e.feature.getProperty('boundary_id'); 
 
    \t \t var boundary_name = "NOT SET"; 
 
    \t \t if(boundary_id && my_boundaries[boundary_id] && my_boundaries[boundary_id].name) boundary_name = my_boundaries[boundary_id].name; 
 
    \t \t if(info_window){ 
 
    \t \t \t info_window.setMap(null); 
 
    \t \t \t info_window = null; 
 
    \t \t } 
 
    \t \t info_window = new google.maps.InfoWindow({ 
 
    \t \t \t content: '<div>You have clicked a boundary: <span style="color:red;">' + boundary_name + '</span></div>', 
 
    \t \t \t size: new google.maps.Size(150,50), 
 
    \t \t \t position: e.latLng, map: map 
 
    \t \t }); 
 
    \t }); 
 
\t 
 
\t data_layer.addListener('mouseover', function(e) { 
 
\t \t data_layer.overrideStyle(e.feature, { 
 
\t \t \t strokeWeight: 3, 
 
\t \t \t strokeColor: '#ff0000' 
 
\t \t }); 
 
\t }); 
 
\t 
 
\t data_layer.addListener('mouseout', function(e) { 
 
\t \t data_layer.overrideStyle(e.feature, { 
 
\t \t \t strokeWeight: 1, 
 
\t \t \t strokeColor: '' 
 
\t \t }); 
 
\t }); 
 
    } 
 

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

<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;" > 
 
\t <select id="boundary_load_select"> 
 
\t \t <option value="1">Load World Boundaries</option> 
 
\t \t <option value="2">Load US States Boundaries</option> 
 
\t </select> 
 
\t <div id="map_canvas" style="height:400px; width:500px;"></div> 
 
</body>