既に作成されたマップにKMLファイルを追加します。

Question

KMLファイルのポリゴンを、それぞれのマーカーで既に作成されたマップに追加しようとしましたが、明らかな結果は得られませんでした。 可能でしょうか？ 私のためには、それは一方的にしか動作しません。 URL KMLファイルは投稿の最後にあります。

var gmarkers1 = []; 
 
var markers1 = []; 
 
var infowindow = new google.maps.InfoWindow({ 
 
    content: '' 
 
}); 
 

 
// Our markers 
 
markers1 = [ 
 
    ['0', 'CLI23456', -18.498682, -70.294426, 'as'], 
 
    ['1', 'CLI12345', -18.499508, -70.295250, 'ap'], 
 
    ['2', 'CLI78912', -18.497622, -70.293671, 'as'], 
 
    ['3', 'CLI54321', -18.472946, -70.295662, 'pvp'] 
 
]; 
 

 
/** 
 
* Function to init map 
 
*/ 
 

 
function initialize() { 
 
    var center = new google.maps.LatLng(-18.476202, -70.307236); 
 
    var mapOptions = { 
 
     zoom: 13, 
 
     center: center, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    for (i = 0; i < markers1.length; i++) { 
 
     addMarker(markers1[i]); 
 
    } 
 
} 
 

 
/** 
 
* Function to add marker to map 
 
*/ 
 

 
function addMarker(marker) { 
 
    var category = marker[4]; 
 
    var title = marker[1]; 
 
    var pos = new google.maps.LatLng(marker[2], marker[3]); 
 
    var content = marker[1]; 
 

 
    marker1 = new google.maps.Marker({ 
 
     title: title, 
 
     position: pos, 
 
     category: category, 
 
     map: map 
 
    }); 
 

 
    gmarkers1.push(marker1); 
 

 
    // Marker click listener 
 
    google.maps.event.addListener(marker1, 'click', (function (marker1, content) { 
 
     return function() { 
 
      console.log('Gmarker 1 gets pushed'); 
 
      infowindow.setContent(content); 
 
      infowindow.open(map, marker1); 
 
      map.panTo(this.getPosition()); 
 
      map.setZoom(13); 
 
     } 
 
    })(marker1, content)); 
 
} 
 

 
/** 
 
* Function to filter markers by category 
 
*/ 
 

 
filterMarkers = function (category) { 
 
    for (i = 0; i < markers1.length; i++) { 
 
     marker = gmarkers1[i]; 
 
     // If is same category or category not picked 
 
     if (marker.category == category || category.length === 0) { 
 
      marker.setVisible(true); 
 
     } 
 
     // Categories don't match 
 
     else { 
 
      marker.setVisible(false); 
 
     } 
 
    } 
 
} 
 

 
// Init map 
 
initialize();

#map-canvas { 
 
    width: 500px; 
 
    height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map-canvas"></div> 
 
<select id="type" onchange="filterMarkers(this.value);"> 
 
    <option value="">Seleccionar categoría</option> 
 
    <option value="as">AS</option> 
 
    <option value="ap">AP</option> 
 
    <option value="pvp">PVP</option> 
 
</select>

KMLファイルのポリゴン：My KML file polygons

Answer 1

あなたはネイティブのGoogleマップのJavascript KMLレンダラーがKmlLayerあるkmlLayer

var map; 

function initialize() { 
    var center = new google.maps.LatLng(-18.476202, -70.307236); 
    var mapOptions = { 
     zoom: 13, 
     center: center, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    for (i = 0; i < markers1.length; i++) { 
     addMarker(markers1[i]); 
    } 


    var mykmlLayer = new google.maps.KmlLayer({ 
      url: 'http://redeslibres.cl/documentos/kml/SECTOR_AS.kml', 
      map: map 
    }); 
} 

Answer 2

を使用する必要があります。

var kmlLayer = new google.maps.KmlLayer({ 
    url: 'http://redeslibres.cl/documentos/kml/SECTOR_AS.kml', 
    map: map 
}); 

preserveViewport: trueオプションを使用して、KMLに合わせて、「自動ズーム」からということを防止するために。

var kmlLayer = new google.maps.KmlLayer({ 
    url: 'http://redeslibres.cl/documentos/kml/SECTOR_AS.kml', 
    map: map, 
    preserveViewport: true // prevent zoom from changing to fit KML 
}); 

コードスニペット：

var gmarkers1 = []; 
 
var markers1 = []; 
 
var infowindow = new google.maps.InfoWindow({ 
 
    content: '' 
 
}); 
 

 
// Our markers 
 
markers1 = [ 
 
    ['0', 'CLI23456', -18.498682, -70.294426, 'as'], 
 
    ['1', 'CLI12345', -18.499508, -70.295250, 'ap'], 
 
    ['2', 'CLI78912', -18.497622, -70.293671, 'as'], 
 
    ['3', 'CLI54321', -18.472946, -70.295662, 'pvp'] 
 
]; 
 

 
/** 
 
* Function to init map 
 
*/ 
 
function initialize() { 
 
    var center = new google.maps.LatLng(-18.476202, -70.307236); 
 
    var mapOptions = { 
 
    zoom: 13, 
 
    center: center, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    var kmlLayer = new google.maps.KmlLayer({ 
 
    url: 'http://redeslibres.cl/documentos/kml/SECTOR_AS.kml', 
 
    map: map, 
 
    preserveViewport: true // prevent zoom from changing to fit KML 
 
    }); 
 

 
    for (i = 0; i < markers1.length; i++) { 
 
    addMarker(markers1[i]); 
 
    } 
 
} 
 

 
/** 
 
* Function to add marker to map 
 
*/ 
 
function addMarker(marker) { 
 
    var category = marker[4]; 
 
    var title = marker[1]; 
 
    var pos = new google.maps.LatLng(marker[2], marker[3]); 
 
    var content = marker[1]; 
 
    var marker1 = new google.maps.Marker({ 
 
    title: title, 
 
    position: pos, 
 
    category: category, 
 
    map: map 
 
    }); 
 
    gmarkers1.push(marker1); 
 

 
    // Marker click listener 
 
    google.maps.event.addListener(marker1, 'click', (function(marker1, content) { 
 
    return function() { 
 
     console.log('Gmarker 1 gets pushed'); 
 
     infowindow.setContent(content); 
 
     infowindow.open(map, marker1); 
 
     map.panTo(this.getPosition()); 
 
     map.setZoom(13); 
 
    } 
 
    })(marker1, content)); 
 
} 
 

 
/** 
 
* Function to filter markers by category 
 
*/ 
 
filterMarkers = function(category) { 
 
    for (i = 0; i < markers1.length; i++) { 
 
    marker = gmarkers1[i]; 
 
    // If is same category or category not picked 
 
    if (marker.category == category || category.length === 0) { 
 
     marker.setVisible(true); 
 
    } 
 
    // Categories don't match 
 
    else { 
 
     marker.setVisible(false); 
 
    } 
 
    } 
 
} 
 

 
// Init map 
 
initialize();

#map-canvas { 
 
    width: 500px; 
 
    height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map-canvas"></div> 
 
<select id="type" onchange="filterMarkers(this.value);"> 
 
    <option value="">Seleccionar categoría</option> 
 
    <option value="as">AS</option> 
 
    <option value="ap">AP</option> 
 
    <option value="pvp">PVP</option> 
 
</select>