Last active
January 4, 2016 05:59
-
-
Save paulusm/8578438 to your computer and use it in GitHub Desktop.
Fusion table layer maps example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
<style type="text/css"> | |
html { height: 100% } | |
body { height: 100%; margin: 0; padding: 0 } | |
#map-canvas { height: 100% } | |
</style> | |
<!--Calling in the api code with your own key --> | |
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNpI-93FtZH-5H4M6vvFGLhwSwVSNC1Tk&sensor=false"> | |
</script> | |
<script type="text/javascript"> | |
function initialize() { | |
//Where do we want the map to centre and the zoom level | |
var mapOptions = { | |
center: new google.maps.LatLng(51.4527, -2.5949), | |
zoom: 12 | |
}; | |
//Associate the map with the DOM element | |
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); | |
//Pulling in the polygon layer from Google Drive | |
var layer = new google.maps.FusionTablesLayer({ | |
query: { | |
select: 'kml', | |
from: '1PAzi-MGBmuBMsdbKWGs-LkEHHlfAG7hjgBh7Zos' | |
}, | |
suppressInfoWindows:true | |
}); | |
layer.setMap(map); | |
//Custom infowindow | |
var infowindow = new google.maps.InfoWindow({ | |
content: "Hello", | |
maxwidth: 200 | |
}); | |
google.maps.event.addListener(layer, 'click', function(e) { | |
infowindow.setContent("<p><b>" + e.row.name.value + "</b></p>"); | |
infowindow.setPosition(e.latLng); | |
infowindow.open(map); | |
//console.log(e.row.name.value); | |
}); | |
google.maps.event.addListener(map, 'click', function() { | |
infowindow.close(); | |
}); | |
} | |
google.maps.event.addDomListener(window, 'load', initialize); | |
</script> | |
</head> | |
<body> | |
<div id="map-canvas"/> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment