I have a FusionTablesLayer on my google map and it works great, but now I have to add a hover to it and I can figure out if it's possible. I've seen examples with a hover on different polygons, but I can't use this.
My layer:
layer = new google.maps.FusionTablesLayer({
map: map,
suppressInfoWindows: true,
heatmap: { enabled: false },
query: {
select: "col0",
from: key,
where: CreateQuery(shownMunicipalities)
},
styles: [{
polygonOptions: {
fillColor: '#eeeeee',
fillOpacity: 0.5,
strokeColor: '#000000',
strokeOpacity: 0.2,
strokeWeight: 2
}
}, {
where: CreateQuery(activeMunicipalities),
polygonOptions: {
fillColor: '#00FF00',
fillOpacity: 0.3
}
}],
options: {
styleId: 2,
templateId: 2
}
});
I've tried add a listener of the mouseover event, but this doesn't seem to do anythin.
google.maps.event.addListener(layer, 'mouseover', function (event) {
alert('hover');
});
Am I trying to do the impossible?
FusionTablesLayers don't support mouseover events, only click events. (see this enhancement request)
There are implementations that add mouseover support (fusiontips) and this example from the FusionTables documentation.
code snippet (example from documentation):
var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
var map;
function initialize() {
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
myOptions);
// Initialize JSONP request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
url.push('sql=');
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap');
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var randomnumber = Math.floor(Math.random() * 4);
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: colors[randomnumber],
strokeOpacity: 0,
strokeWeight: 1,
fillColor: colors[randomnumber],
fillOpacity: 0.3
});
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({
fillOpacity: 1
});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({
fillOpacity: 0.3
});
});
country.setMap(map);
}
}
}
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}
google.maps.event.addDomListener(window, 'load', initialize);#map-canvas {
height: 500px;
width: 600px;
}<script src="https://maps.google.com/maps/api/js"></script>
<div id="map-canvas"></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다