他のGeojsonポイントをクリックしたときにスタイルを元に戻す

Question

私は複数のGeojsonデータレイヤーでGoogleマップを作成し、カスタムアイコンを配置してクリックすると同じアイコンが変更されるようにしました。

私がしようとしているのは、同じデータレイヤー（および/または他のレイヤー）の別のGeojsonポイントをクリックすると元の状態に戻すことです。

シンプルに聞こえるかもしれませんが、それはわかりません。

var infowindow = new google.maps.InfoWindow(); 
 
var offices = new google.maps.Data(); 
 

 
offices.addGeoJson({ 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
     "type": "Feature", 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [4.403528, 51.260561] 
 
     }, 
 
     "properties": { 
 
     "Location": "Antwerp", 
 
     "Country": "BE" 
 
     } 
 
    }, 
 
    { 
 
     "type": "Feature", 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [9.986818, 53.554377] 
 
     }, 
 
     "properties": { 
 
     "Location": "Hamburg", 
 
     "Country": "DE" 
 
     } 
 
    } 
 
    ] 
 
}); 
 

 
offices.setStyle({ 
 
    icon: 'images/icons/logo-1.png' 
 
}); 
 
offices.setMap(map); 
 
offices.addListener('click', function(event) { 
 

 
    var office_location = event.feature.getProperty("Location"); 
 
    var office_country = event.feature.getProperty("Country"); 
 

 
    infowindow.setContent(office_location + " - " + office_country); 
 

 
    infowindow.setPosition(event.feature.getGeometry().get()); 
 
    infowindow.setOptions({ 
 
    pixelOffset: new google.maps.Size(0, -30) 
 
    }); 
 

 
    offices.overrideStyle(event.feature, { 
 
    icon: 'images/icons/logo-2.png' 
 
    }); 
 
    infowindow.open(map); 
 
    map.panTo(event.latLng); 
 
}); 
 

 
google.maps.event.addListener(infowindow, 'closeclick', function() { 
 
    offices.revertStyle(); 
 
}); 
 

 
google.maps.event.addListener(map, 'click', function() { 
 
    infowindow.close(); 
 
    offices.revertStyle(); 
 
});

私は、あなたはこの1つで私を助けることができる願っています。

Answer 1

前の機能を保存します。

if (previousFeature != null) 
    offices.revertStyle(previousFeature); 

offices.overrideStyle(event.feature, { 
    icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png' 
}); 
previousFeature = event.feature; 

proof of concept fiddle

コードスニペット：

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(51.260561, 4.403528), 
 
     zoom: 5, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    var offices = new google.maps.Data(); 
 

 
    offices.addGeoJson({ 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
     "type": "Feature", 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [4.403528, 51.260561] 
 
     }, 
 
     "properties": { 
 
     "Location": "Antwerp", 
 
     "Country": "BE" 
 
     } 
 
    }, { 
 
     "type": "Feature", 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [9.986818, 53.554377] 
 
     }, 
 
     "properties": { 
 
     "Location": "Hamburg", 
 
     "Country": "DE" 
 
     } 
 
    }] 
 
    }); 
 

 
    offices.setStyle({ 
 
    icon: 'http://maps.google.com/mapfiles/ms/micons/green.png' 
 
    }); 
 
    offices.setMap(map); 
 
    var previousFeature = null; 
 
    offices.addListener('click', function(event) { 
 

 
    var office_location = event.feature.getProperty("Location"); 
 
    var office_country = event.feature.getProperty("Country"); 
 

 
    infowindow.setContent(office_location + " - " + office_country); 
 

 
    infowindow.setPosition(event.feature.getGeometry().get()); 
 
    infowindow.setOptions({ 
 
     pixelOffset: new google.maps.Size(0, -30) 
 
    }); 
 
    if (previousFeature != null) offices.revertStyle(previousFeature); 
 
    offices.overrideStyle(event.feature, { 
 
     icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png' 
 
    }); 
 
    previousFeature = event.feature; 
 
    infowindow.open(map); 
 
    map.panTo(event.latLng); 
 
    }); 
 

 
    google.maps.event.addListener(infowindow, 'closeclick', function() { 
 
    offices.revertStyle(); 
 
    }); 
 

 
    google.maps.event.addListener(map, 'click', function() { 
 
    infowindow.close(); 
 
    offices.revertStyle(); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>