Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marcusasplund/1425011 to your computer and use it in GitHub Desktop.
Save marcusasplund/1425011 to your computer and use it in GitHub Desktop.
Quick map creating a mouseover-like event on a google map using a Fusion Tables layer...
<style>
#map_canvas { width: 600px; height: 600px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- INCLUDE THIS SCRIPT REFERENCE FOR MOUSEOVER -->
<script type="text/javascript" src="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/src/fusiontips_compiled.js"></script>
<script type="text/javascript">
var map;
var layer;
var tableid = 2287502;
$(document).ready(function(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(44.81691551782855, -89.912109375),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer(tableid, {suppressInfoWindows: true});
layer.setQuery("SELECT 'geometry' FROM " + tableid);
layer.setMap(map);
//map tips
layer.enableMapTips({
select: "'County_Name', 'Dem Name', 'Gop Name', 'Victory Margin'", // list of columns to query, typially need only one column.
from: tableid, // fusion table name
geometryColumn: 'geometry', // geometry column name
suppressMapTips: true, // optional, whether to show map tips. default false
delay: 100, // milliseconds mouse pause before send a server query. default 300.
tolerance: 8 // tolerance in pixel around mouse. default is 6.
});
//here's the pseudo-hover
google.maps.event.addListener(layer, 'mouseover', function(fEvent) {
var row = fEvent.row;
$('#info').html(
'<h3>' + row['County_Name'].value + '</h3>' +
'<p>' + row['Dem Name'].value + '</p>' +
'<p>' + row['Gop Name'].value + '</p>');
});
//mouseout
google.maps.event.addListener(layer, 'mouseout', function(fevt) {
$("#info").html('<h2>Mouseout</h2>');
});
});
</script>
<div id="map_canvas"></div>
<div id="info"><h2>Content</h2></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment