Highlight country around the border from your search area only

Question

I have to make a KML file from the Dutch country.

What I want to do is:

I want to Highlight only the countries around the border from my search area.

Example:

As a user searches on 'Amsterdam'. There are like 9 (Zaandam, Amstelveen, Hooftdorp, Diemen, Duivendrecht, ......) other states that are connected with Amsterdam. I want only these 9 states to have a highlight.

So all I want to do is Highlight the states that are connected on the border from the user search area.

Can anybody help me here?

Example my code I have till now:

function codeAddress() {
    var address = document.getElementById("search-input").value; // get search result
    geocoder.geocode({'address': address}, geocoderCallback);
}

function initialize() {
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(lat, lng),
        disableDefaultUI: true,
        mapTypeControl: false,
        zoomControl: true
    }
    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, geocoderCallback);



}

// function for hilight
function geocoderCallback(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var lat = results[0].geometry.location.lat();
        var lng = results[0].geometry.location.lng();

        // get location where user are searching
                if (!layer) {
                    layer = new google.maps.FusionTablesLayer({
                        map:map,
                        heatmap:{enebled: false},
                        query: {
                            select: 'col2',
                            where:'',
                            from: tableId
                        },
                        styles: [{
                            where: 'ST_INTERSECTS(col2, CIRCLE(LATLNG(' + lat + ', ' + lng + '),' + radius + '))',
                            polygonOptions: {
                                strokeColor: '#FF0000', // color red
                                fillColor: '#808080' // color gray
                            }
                        }, {
                            // search area
                            where: 'ST_INTERSECTS(col2, CIRCLE(LATLNG(' + lat + ', ' + lng + '),1))',
                            polygonOptions: {
                                strokeColor: '#FFA500',// color orange
                                strokeWeight: 3,
                                fillOpacity: 0.08
                            }
                        }]
                    });
                    layer.setMap(map);
                }
                else {
                    layer.setOptions({
                        query: {
                            select: 'col2',
                            from: tableId,
                            where: 'ST_INTERSECTS(col2, CIRCLE(LATLNG(' + lat + ', ' + lng + '),' + radius + '))'
                        }
                    });
                    layer.setMap(map);
                }
            } else {
                alert("your search was not successful for the following reason: " + status);
            }
        };
        google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" class="span12 col-md-8 col-sm-9"/>
</div>

But now the whole Netherlands is highlighted!

i have change my code but i still get the red hilight area i wanna get rid of it can any body help me here?

Answer 1

Your code as posted works for me. The two issues are:

1. the 1 meter circle only selects one county (I assume you mean counties not countries).
2. the fill is fairly transparent and the orange lines can't be seen.

note that there isn't any real way to query for adjoining/bordering polygons.

proof of concept fiddle

code snippet:

var tableId = "1WkOReHYpsvNiACHeL5tOxsuYO-nRmzOdXm7B-GDo";
var lat = 52.132633,
  lng = 5.291266;
var address = "Amsterdam";
var layer, circle;

function codeAddress() {
    address = document.getElementById("search-input").value; // get search result
    geocoder.geocode({
        'address': address
    }, geocoderCallback);
}

function initialize() {
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(lat, lng),
    disableDefaultUI: true,
    mapTypeControl: false,
    zoomControl: true
  }
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': address
  }, geocoderCallback);
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', codeAddress);


}

// function for hilight
function geocoderCallback(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var lat = results[0].geometry.location.lat();
        var lng = results[0].geometry.location.lng();
        var bounds = results[0].geometry.viewport;
        map.fitBounds(bounds);
        // get location where user are searching
        var radius = google.maps.geometry.spherical.computeDistanceBetween(bounds.getCenter(), bounds.getNorthEast()); // 20000;
        // get location where user are searching
        if (!layer) {
            layer = new google.maps.FusionTablesLayer({
                query: {
                    select: 'geometry',
                    from: tableId,
                    where: 'ST_INTERSECTS(col2, CIRCLE(LATLNG(' + lat + ', ' + lng + '),' + radius + '))'
                },
                styles: [{
                    polygonOptions: {
                        fillColor: '#FFFF00',
                        strokeColor: '#0000FF',
                        strokeWeight: 1,
                        strokeOpacity: 0.8,
                        fillOpacity: 0.5
                    }
                }, {
                    where: 'name = \x27' + address + '\x27',
                    polygonOptions: {
                        strokeColor: '#FFA500', // color orange
                        strokeWeight: 5,
                        strokeOpacity: 0.8,
                        fillOpacity: 0.001
                    }
                }]
            });

        } else {
            layer.setOptions({
                query: {
                    select: 'geometry',
                    from: tableId,
                    where: 'ST_INTERSECTS(col2, CIRCLE(LATLNG(' + lat + ', ' + lng + '),' + radius + '))'
                },
                styles: [{
                    polygonOptions: {
                        fillColor: '#FFFF00',
                        strokeColor: '#0000FF',
                        strokeWeight: 1,
                        strokeOpacity: 0.8,
                        fillOpacity: 0.5
                    }
                }, {
                    where: 'name = \x27' + address + '\x27',
                    polygonOptions: {
                        strokeColor: '#FFA500', // color orange
                        strokeWeight: 5,
                        strokeOpacity: 0.8,
                        fillOpacity: 0.001
                    }
                }]
            });
        }
        layer.setMap(map);
    } else {
        alert("your search was not successful for the following reason: " + status);
    }
};
google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas {
  width: 500px;
  height: 400px;
}
.layer-wizard-search-label {
  font-family: sans-serif
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&ext=.js"></script>
<input id="search-input" value="Amersfoort" />
<input id="btn" type="button" value="geocode" />
<div id="map-canvas" class="span12 col-md-8 col-sm-9" />