Google Maps API v3
Points: Simple Example | Complex Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Google Maps API v3 Point Map</title>
<script type="text/javascript" src="http://0api.maplarge.com/Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://0api.maplarge.com/Scripts/Map3.js"></script>
</head>
<body >
<div style="height:600px; width:600px;" id="map_div" >
Map Div - Map will appear here
</div>
<script type="text/javascript" >
<!--
var startZoom = 7; //starting zoom level
var startLat = 26.81497672282066; //starting
var startLng = -82.3886631011962;
var filterString = "";
var hovString = "SCHOOL_NAME_LONG,Math";//list of fields
var layerString = "geo~dot~XY|data~FCATMap~Math";//map XY coords, of the dataset FCATMap and the field "Math" will be used for shading
var shaderString = "method~interval|colors~Red/Yellow,Yellow/Green|ranges~25/50,50/75|dropShadow~true"; //colors and format for shading
var hoverFunc = null;
var clickFunc = null;
var makeList = null;
var startSpot = new google.maps.LatLng(startLat, startLng);
var mapOptions = {
zoom: startZoom,
center: startSpot,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true
};
var map = new google.maps.Map(document.getElementById("map_div"), mapOptions);
var myLayer1 = new mapLayer("myLayer1",//globally unique name for your layer... allows you to reference it in inline code for on click events etc.
map, //reference to a google map
layerString, //the data to be mapped
shaderString, //how to shade the data
filterString, //optional filters to be applied to point data
hovString, //data fields requested when hovering over a shape or point
hoverFunc, //function that takes a data object and returns a html string
clickFunc, //function that takes a data object and returns a html string
makeList, //function that takes a data object and rerutns null.. users set their own list html
21 //max number of list items requested
);
var mouseTracker = new MouseWatcher(map, [myLayer1]); //manages layer interactivity between layers.. allows layer interactivity to be prioritized
myLayer1.show(); //show the layer
//layer2.hide(); hide the layer
// -->
</script>
</body>
</html>
var hotelRates = {
query: {
table: { name: 'hotels' },
select: { type: 'geo.dot' },
where: [
{
col: "LowRate", test: "Between",
value: [{ min: 5, max: 10 }, { min: 100, max: 200}]
},
{
col: "ChainID", test: "Contains", value: 'hilton'
}
]
},
style: {
method: 'interval',
shadeBy: "hotels.LowRate",
colors: [
{ min: 'LightBlue', max: 'Blue' },
{ min: 'Blue', max: 'Red' }
],
ranges: [
{ min: 50, max: 125 },
{ min: 125, max: 300 }
],
dropShadow: true,
steps: 100,
text: { x: 3, y: 3, size: 9, text: '$', color: 'White' },
numericLabel: { x: 8, y: 3, round: 0, color: 'White' },
shape: 'rectangle',
height: 14,
size: 30,
count: 300
}
};
Shapes: Simple Example | Complex Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Google Maps API v3 Point Map</title>
<script type="text/javascript" src="http://0api.maplarge.com/Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://0api.maplarge.com/Scripts/Map3.js"></script>
</head>
<body >
<div style="height:600px; width:600px;" id="map_div" >
Map Div - Map will appear here
</div>
<script type="text/javascript" >
<!--
var startZoom = 7; //starting zoom level
var startLat = 26.81497672282066; //starting
var startLng = -82.3886631011962;
var filterString = "";
var hovString = "NAME,Math~avg"; //list of fields
var layerString = "geo~poly~FLSchoolDist|data~FCATMap~Math~avg"; //map XY coords, of the dataset FCATMap and the field "Math" will be used for shading
var shaderString = "method~interval|colors~White-0/White-0,Red/Yellow,Yellow/Green|ranges~-1/.1,25/50,50/75"; //colors and format for shading
var hoverFunc = null;
var clickFunc = null;
var makeList = null;
var startSpot = new google.maps.LatLng(startLat, startLng);
var mapOptions = {
zoom: startZoom,
center: startSpot,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true
};
var map = new google.maps.Map(document.getElementById("map_div"), mapOptions);
var myLayer1 = new mapLayer("myLayer1", //globally unique name for your layer... allows you to reference it in inline code for on click events etc.
map, //reference to a google map
layerString, //the data to be mapped
shaderString, //how to shade the data
filterString, //optional filters to be applied to point data
hovString, //data fields requested when hovering over a shape or point
hoverFunc, //function that takes a data object and returns a html string
clickFunc, //function that takes a data object and returns a html string
makeList, //function that takes a data object and rerutns null.. users set their own list html
21 //max number of list items requested
);
var mouseTracker = new MouseWatcher(map, [myLayer1]); //manages layer interactivity between layers.. allows layer interactivity to be prioritized
myLayer1.show(); //show the layer
//layer2.hide(); hide the layer
// -->
</script>
</body>
</html>