javascript - 国の選択を許可し、国レベルのみにズームインする

Question

Googleマップを使用したいのですが、国レベルでのみです。つまり、世界地図全体を単一のウィンドウに表示したいのですが、ユーザーは国のクリックで任意の国を選択できる必要があります。また、いくつかのポップアップを表示できる必要があります。 JSから選択した国の値を取得したい。これについて私を案内してください。これについてグーグルで検索しましたが、完全な情報はありません。

Answer 1

次の 2 つの例を組み合わせます。

1. 国にズーム
2. クリック可能な世界地図

クリックして国にズーム

var map=null;
var geocoder = null;
var kmlLayer = null;
var infoWindow = new google.maps.InfoWindow(); // InfoWindow

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;
  findAddress(content);
}

function initialize() {
  geocoder = new google.maps.Geocoder();
  var chicago = new google.maps.LatLng(36.4278,-15.9);
  var myOptions = {
    zoom: 2,
    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);

}    

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