Google Maps with Fusion Table

by upsidown

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src='http://maps.google.com/maps/api/js?sensor=false'> </script>
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<div id="map"/>

CSS

#map-canvas {
    position: relative;
    top: 0px;
    left: 0px;
    width: 450px;
    height: 375px;
    border: 1px solid #999;
    z-index: 100;
}

JavaScript

function initialize() {

    var mapOptions = {
        center: new google.maps.LatLng(1, 104),
        zoom: 4,
        mapTypeId: 'roadmap'
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var layer = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: '1aclHzWdYrUCcHHfgbmKnFTqTTppgeI0SkKNXPpYR',
            where: "'name' like 'Krabi'",
        },
        styles: [{
            polygonOptions: {
                fillColor: '#000000',
                fillOpacity: 1,
                strokeWeight: 0
            }
        }],
        map: map
    });
}