Google Maps V3: Disegna poligoni di stato tedeschi?

Question

Ho bisogno di disegnare poligoni colorati su alcuni stati tedeschi. Qual è il modo migliore (o più semplice, più veloce, qualsiasi davvero ...) per fare questo? Devo in qualche modo ottenere tutti i contorni come punti lat/lon e disegnare un poligono basato su quelli? O c'è un modo migliore?

Answer 1

Vuoi fare qualcosa di simile? http://www.geocodezip.com/geoxml3_test/v3_FusionTables_query_sidebarF_local.html?country=Germany

Utilizza publicly available data in FusionTables, the Natural Earth Data set.

Puoi modellarli (colorali) come preferisci.

frammento di codice:

// globals 
 
var map = null; 
 
var infoWindow = null; 
 
var geoXml = null; 
 
var geoXmlDoc = null; 
 
var myLatLng = null; 
 
var myOptions = null; 
 
var mapCenter = null; 
 
var geocodeTheCountry = true; 
 
var gpolygons = []; 
 

 
// Fusion Table data ID 
 
var FT_TableID = "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA"; // 420419; 
 
var CountryName = "Germany"; 
 
google.load('visualization', '1', { 
 
    'packages': ['corechart', 'table', 'geomap'] 
 
}); 
 

 
function createSidebar() { 
 
    // set the query using the parameters 
 
    var FT_Query2 = "SELECT 'name_0', 'name_1', 'kml_4326' FROM " + FT_TableID + " WHERE name_0 = '" + CountryName + "' ORDER by 'name_1'"; 
 
    var queryText = encodeURIComponent(FT_Query2); 
 
    // alert("createSidebar query="+FT_Query2); 
 
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 
 

 
    //set the callback function 
 
    query.send(getData); 
 
} 
 

 
// Set a callback to run when the Google Visualization API is loaded. 
 
google.setOnLoadCallback(createSidebar); 
 

 
var FTresponse = null; 
 

 
myLatLng = new google.maps.LatLng(37.422104808, -122.0838851); 
 
// these set the initial center, zoom and maptype for the map 
 
// if it is not specified in the query string 
 
var lat = 37.422104808; 
 
var lng = -122.0838851; 
 
var zoom = 18; 
 
var maptype = google.maps.MapTypeId.ROADMAP; 
 
if (!isNaN(lat) && !isNaN(lng)) { 
 
    myLatLng = new google.maps.LatLng(lat, lng); 
 
} 
 
infoWindow = new google.maps.InfoWindow(); 
 
//define callback function, this is called when the results are returned 
 
function getData(response) { 
 
    if (!response) { 
 
    alert('no response'); 
 
    return; 
 
    } 
 
    if (response.isError()) { 
 
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
    return; 
 
    } 
 
    FTresponse = response; 
 
    //for more information on the response object, see the documentation 
 
    //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse 
 
    numRows = response.getDataTable().getNumberOfRows(); 
 
    numCols = response.getDataTable().getNumberOfColumns(); 
 

 
    fusiontabledata = "<table><tr>"; 
 
    fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(1) + "</th>"; 
 
    // } 
 
    fusiontabledata += "</tr><tr>"; 
 

 
    for (i = 0; i < numRows; i++) { 
 
    fusiontabledata += "<td><a href='javascript:myFTclick(" + i + ")'>" + response.getDataTable().getValue(i, 1) + "</a></td>"; 
 
    // } 
 
    fusiontabledata += "</tr><tr>"; 
 
    } 
 
    fusiontabledata += "</table>"; 
 
    //display the results on the page 
 
    document.getElementById('sidebar').innerHTML = fusiontabledata; 
 
} 
 

 
function infoWindowContent(name, description) { 
 
    content = '<div class="FT_infowindow"><h3>' + name + 
 
    '</h3><div>' + description + '</div></div>'; 
 
    return content; 
 
} 
 

 
function myFTclick(row) { 
 
    var description = FTresponse.getDataTable().getValue(row, 0); 
 
    var name = FTresponse.getDataTable().getValue(row, 1); 
 
    if (!gpolygons[row]) { 
 
    var kml = FTresponse.getDataTable().getValue(row, 2); 
 
    // create a geoXml3 parser for the click handlers 
 
    var geoXml = new geoXML3.parser({ 
 
     map: map, 
 
     zoom: false, 
 
     infoWindow: infoWindow, 
 
     singleInfoWindow: true 
 
    }); 
 

 
    geoXml.parseKmlString("<Placemark>" + kml + "</Placemark>"); 
 
    geoXml.docs[0].gpolygons[0].setMap(null); 
 
    gpolygons[row] = geoXml.docs[0].gpolygons[0].bounds.getCenter(); 
 
    } 
 
    var position = gpolygons[row]; 
 
    if (!infoWindow) infoWindow = new google.maps.InfoWindow({}); 
 
    infoWindow.setOptions({ 
 
    content: infoWindowContent(name, description), 
 
    pixelOffset: new google.maps.Size(0, 2), 
 
    position: position 
 
    }); 
 
    infoWindow.open(map); 
 
} 
 

 
function initialize() { 
 
    myOptions = { 
 
    zoom: zoom, 
 
    center: myLatLng, 
 
    mapTypeId: maptype 
 
    }; 
 

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

 
    var geocoder = new google.maps.Geocoder(); 
 
    if (geocoder && geocodeTheCountry) { 
 
    geocoder.geocode({ 
 
     'address': CountryName + " Country" 
 
    }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
     if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { 
 
      map.setCenter(results[0].geometry.location); 
 
      map.fitBounds(results[0].geometry.viewport); 
 
     } else { 
 
      alert("No results found"); 
 
     } 
 
     } else { 
 
     alert("Geocode was not successful for the following reason: " + status); 
 
     } 
 
    }); 
 
    } 
 

 
    var FT_Query = "SELECT 'kml_4326' FROM " + FT_TableID + " WHERE 'name_0' = '" + CountryName + "';"; 
 
    var FT_Options = { 
 
    suppressInfoWindows: true, 
 
    query: { 
 
     from: FT_TableID, 
 
     select: 'kml_4326', 
 
     where: "'name_0' = '" + CountryName + "';" 
 
    }, 
 
    styles: [{ 
 
     polygonOptions: { 
 
     fillColor: "#FF0000", 
 
     fillOpacity: 0.35 
 
     } 
 
    }] 
 
    }; 
 
    layer = new google.maps.FusionTablesLayer(FT_Options); 
 
    layer.setMap(map); 
 

 
    google.maps.event.addListener(layer, "click", function(event) { 
 
    infoWindow.close(); 
 
    infoWindow.setContent(infoWindowContent(event.row.name_1.value, event.row.name_0.value)); 
 
    infoWindow.setPosition(event.latLng); 
 
    infoWindow.open(map); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map_canvas { 
 
    width: 300px; 
 
    height: 100% 
 
} 
 
.infowindow * { 
 
    font-size: 90%; 
 
    margin: 0 
 
}

<script src="https://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> 
 
<script src="http://www.google.com/jsapi"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<table style="width:100%; height:100%;"> 
 
    <tr style="width:100%; height:90%;"> 
 
    <td style="width:60%; height:100%;"> 
 
     <div id="map_canvas"></div> 
 
    </td> 
 
    <td> 
 
     <div id="sidebar" style="width:300px;height:400px; overflow:auto"></div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Inoltre, si potrebbe dare un'occhiata a Google GeoChart API, che non quello ma piuttosto facile ricco di funzionalità da utilizzare è. Provate il seguente codice nel API playground:

function drawVisualization() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Province', 'Popularity'], 
    ['Bremen', 100], 
    ['Niedersachsen', 900], 
    ['Saksen', 700], 
    ['Saarland', 300], 
    ['Bayern', 400] 
    ]); 

    var options = { 
     region: 'DE', 
     displayMode: 'regions', 
     colorAxis: {colors: ['green', 'blue']}, 
     resolution:'provinces' 
     }; 


    var geochart = new google.visualization.GeoChart(
     document.getElementById('visualization')); 
    geochart.draw(data, options, {width: 556, height: 347}); 
}