I've been working on this for a couple so getting to this point should make me very happy. However, I cannot figure out my infowindow output is adding "\n" to every new line. No idea how it's getting there. The geolocation is also being appended to the search result infowindow. I'd like to remove that as well.
Here is a link to the map: http://58design.com/gmaps/
Here is my code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sheriff | Zone Leader Look Up</title>
<meta name="author" content="Santa Clarita Valley Sheriff" />
<meta name="copyright" content="Copyright 2013 SCV Sheriff" />
<meta name="keywords" content="Santa Clarita Valley Sheriff, SCV Sheriff, Canyon Country, Valencia, Saugus, Newhall, Castaic, Gorman, Stevenson Ranch, " />
<meta name="description" content="Santa Clarita Valley Sheriff Zone Leader Contact Inforamtion Look Up." />
<meta name="robots" content="index,follow" />
<meta name="Googlebot" content="follow" />
<meta name="googlebot" content="archive" />
<meta name="distribution" content="global" />
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
//var FusionTableID = 1931355;
var FusionTableID = '1uSGM1yPMJBlu74Znm4fPqdCsJjteB_kQ_nGz3tk';
var map = null;
var geocoder = null;
var infowindow = null;
var marker = null;
function initialize() {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50) });
// create the map
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(34.452789398370045, -118.51948001245114),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
//layer = new google.maps.FusionTablesLayer(FusionTableID,{suppressInfoWindows:true});
layer = new google.maps.FusionTablesLayer({
map: map,
suppressInfoWindows: true,
heatmap: { enabled: false },
query: {
select: "col2",
from: "1uSGM1yPMJBlu74Znm4fPqdCsJjteB_kQ_nGz3tk",
where: "",
},
options: {
styleId: 2,
templateId: 2
}
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", function(e) {
var content = e.row['description'].value+"<br><br>";
infowindow.setContent(content);
infowindow.setPosition(e.latLng);
infowindow.open(map);
});
}
function showAddress(address) {
var contentString = address+"<br>Outside Area";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var point = results[0].geometry.location;
contentString += "<br>"+point;
map.setCenter(point);
if (marker && marker.setMap) marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: point
});
// query FT for data
var queryText ="SELECT 'description', 'Zone Area' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'Zone Area\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.5));";
// document.getElementById('FTQuery').innerHTML = queryText;
queryText = encodeURIComponent(queryText);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(openInfoWindowOnMarker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function openInfoWindowOnMarker(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
FTresponse = response;
//for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
var content = "<b>Outside area</b><br><br>";
var unionBounds = null;
// alert(numRows);
for (var i=0; i < numRows; i++) {
var name = FTresponse.getDataTable().getValue(i,0);
var kml = FTresponse.getDataTable().getValue(i,1);
content = response.getDataTable().getValue(i,0)+"<br><br>";
}
infowindow.setContent(content+marker.getPosition().toUrlValue(6));
// zoom to the bounds
// map.fitBounds(unionBounds);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, 'click');
}
</script>
</head>
<body onload="initialize()">
<div id="content">
<h1>SCV Sheriff Reporting Zones</h1>
<p>Use the map below to determine your area's Zone Leader. Enter your street address, city and zip code in the search field below to view the Zone Leader's contact info.</p>
<form action="#" onsubmit="showAddress(this.address.value); return false" style="padding:10px 0px 30px 0px; background:none;">
<label>Address Search</label>
<input type="text" size="60" name="address" value="23920 Valencia Blvd. Santa Clarita, CA 91355" class="address" />
<input type="submit" value="Search" />
</p>
<div id="map_canvas" style="width: 516px; height: 387px; margin-bottom:30px; border:1px solid #999;"></div>
</form>
</div>
<div id="sidebar">
</div>
<div class="clear"><!--clear--></div>
</div>
</body>
</html>
The problem is in the data in your FusionTable (the line feeds are getting translated into "\n"). I fixed the entry for "Gorman" in my example (by removing the extraneous line feeds).
This line of my code is appending the geolocation to the search result infowindow:
infowindow.setContent(content+marker.getPosition().toUrlValue(6));
Related
I have a navigation iFrame on the left side and I want to fire the $("#accordion").accordion("refresh"); event on asp:TreeNode (ClientExpand), so that the height of the nested asp:TreeView will determine the height of the surrounded DIV of the Accordion Tab of the JQuery UI Accordion.
Is there a way to react on the expanded asp:TreeView with a client-sided javascript $("#accordion").accordion("refresh");?
<%# Page Language="C#" AutoEventWireup="true" CodeFile="NavigationTree.aspx.cs" Inherits="NavigationTree" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="js/displayToc.js"></script>
<style type="text/css">
.treeNode
{
color:#666;
font-family:Arial,Helvetica,sans-serif;
font-size: 13px;
}
.rootNode
{
color:#666;
font-family:Arial,Helvetica,sans-serif;
font-size: 13px;
}
.leafNode
{
color:#666;
font-family:Arial,Helvetica,sans-serif;
font-size: 13px;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui.js"></script>
<script type="text/javascript">
var zuletztSelektiert = '';
$(function () {
var treeView1 = $('#<%= TreeView1.ClientID %>');
var treeNodes = treeView1.find('div[id$=Nodes]');
var treeImages = treeView1.find('img').not('img[alt=\'\']');
$("#searchField").keydown(function (e) {
if (e.keyCode == 13) {
$("#btnSearch").click();
e.preventDefault();
}
});
$("#btnSearch").click(function (event) {
var meineLinkTexte = '';
var parentEls = '';
treeNodes.css({ 'display': 'none' });
treeImages.attr('src', 'images/plus.gif')
$("a").each(function () {
//Do your work
var selectedElement = $(this).attr('id');
$("#" + selectedElement).css({ 'background-color': '#FFFFFF' });
if ($(this).text().toLowerCase().indexOf($("#searchField").val().toLowerCase()) > -1) {
$("#" + selectedElement).parents("[id$='Nodes']").css({ 'display': 'block' });
$("#" + selectedElement).css({ 'background-color': '#DEDEDE' });
meineLinkTexte += $(this).attr('id') + '';
}
})
event.preventDefault();
});
$("[id*=TreeView1] input[type=checkbox]").bind("click", function () {
var selectedStereoType = $.trim($(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1));
//return;
var isChecked = $(this).is(":checked");
if (isChecked) {
//zuletztSelektiert = zuletztSelektiert + $(this).next().text();
zuletztSelektiert = zuletztSelektiert + selectedStereoType;
}
else {
//zuletztSelektiert = zuletztSelektiert.replace($(this).next().text(), '');
zuletztSelektiert = zuletztSelektiert.replace(selectedStereoType, '');
}
if (zuletztSelektiert != '') {
// Welcher Stereotyp ist selektiert?
//var stereotype = zuletztSelektiert.substring(zuletztSelektiert.indexOf('«') + 1, zuletztSelektiert.indexOf('»'));
var stereotype = selectedStereoType;
var letzteMeldung = '';
$("[id*=TreeView1] input[type=checkbox]").each(function () {
//var currentStereotype = $(this).next().text().substring($(this).next().text().indexOf('«') + 1, $(this).next().text().indexOf('»'));
var currentStereotype = $.trim( $(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1) );
if (currentStereotype != stereotype) {
var isChecked2 = $(this).is(":checked");
if (isChecked2) {
$(this).removeAttr("checked");
zuletztSelektiert = zuletztSelektiert.replace($.trim( $(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1) ), '');
letzteMeldung='It is not possible to select elements of different stereotypes. \n\n Selected Items: ' + zuletztSelektiert;
}
}
});
if (letzteMeldung != '') alert(letzteMeldung);
}
});
$("#accordion").accordion({
collapsible: true,
heightStyle: "fill"
});
})
function deselectAll() {
$("[id*=TreeView1] input[type=checkbox]").removeAttr("checked");
}
</script>
</head>
<body onload="tocInit();">
<form id="form1" runat="server">
<div>
<div id="accordion">
<h3>Navigation Tree</h3>
<div>
<asp:TextBox ID="searchField" runat="server" />
<asp:Button ID="btnSearch" runat="server" Text="Search" />
<asp:TreeView ID="TreeView1"
NodeStyle-CssClass="treeNode"
RootNodeStyle-CssClass="rootNode"
LeafNodeStyle-CssClass="leafNode"
runat="server">
</asp:TreeView>
</div>
<h3>Views</h3>
<div>
<p>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Width="210px" /> <br />
<asp:Label ID="Label1" runat="server"></asp:Label><br/>
</p>
</div>
</div>
</div>
</form>
</body>
</html>
It looks like i got the behaviour i was looking for with
$("#accordion").accordion({
collapsible: true,
heightStyle: "content"
});
I've been attempting to put together a fusion map that is filterable by a checkbox.
I've used Google's sample code but have clearly gone wrong somewhere.
I'm new to this so I know it's probably a simple mistake but I can't find it.
The checkbox is only working for 1 filter. The others don't work nor does the data linked to them load.
I'd appreciate any help to identify where I've gone wrong.
my data table is at https://www.google.com/fusiontables/DataSource?docid=1VnR1phtvbSUZXPiiVbxiwzOF06sdW_GiZoqd8Ks
and my code is below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Fusion Tables Layer Example: IN query</title>
<link href="https://developers.google.com/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var tableId = '1VnR1phtvbSUZXPiiVbxiwzOF06sdW_GiZoqd8Ks';
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(53.30647442766776, -2.0839745570312917),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer();
filterMap(layer, tableId, map);
google.maps.event.addDomListener(document.getElementById('anna-mathers'),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById('sonia-osborne'),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById('neil-larner'),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById('bridget-tully'),
'click', function() {
filterMap(layer, tableId, map);
});
}
// Filter the map based on checkbox selection.
function filterMap(layer, tableId, map) {
var where = generateWhere();
if (where) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: 'Location',
from: tableId,
where: where
}
});
} else {
layer.setMap(null);
}
}
// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
var filter = [];
var ops = document.getElementsByName('ops');
for (var i = 0, ops; ops = ops[i]; i++) {
if (ops.checked) {
var opsName = ops.value.replace(/'/g, '\\\'');
filter.push("'" + opsName + "'");
}
}
var where = '';
if (filter.length) {
where = "'Ops' IN (" + filter.join(',') + ')';
}
return where;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
<input type="checkbox" checked="checked" name="ops"
id="sonia-osborne" value="Sonia Osborne">
<label>Sonia Osborne</label>
<input type="checkbox" checked="checked" name="ops"
id="anna-mathers" value="Anna Mathers">
<label>Anna Mathers</label>
<input type="checkbox" checked="checked" name="ops"
id="neil-larner" value="Neil Larner">
<label>Neil Larner</label>
<input type="checkbox" checked="checked" name="ops"
id="bridget-tully" value="Bridget Tully">
<label>Bridget Tully</label>
</div>
</body>
</html>
You are overwriting ops in the for-condition:
ops = ops[i]
after the first loop the condition will fail, because ops[i] is undefined
Fixed version:
for (var i = 0; i<ops.length,op=ops[i]; ++i) {
if (op.checked) {
var opName = op.value.replace(/'/g, '\\\'');
filter.push("'" + opName + "'");
}
}
I found several other people on here had the same issue with the Fusion Table Wizard generating HTML that works in the preview but when you try to embed the code on your own webpage pieces are missing. Mine for example, will show the search bar but not the map. Someone else had the same problem and it turned out that quotes were missing around the id number. But mine does have the appropriate quotes. So I'm wondering what is wrong with my code. I've compared my code to theirs several times looking for what is missing but can't figure it out.
Our webpage is hosted by jimdo, and I have to use the html/widget. I copy and paste the code into that. But it does say that some code requires you to edit the head section. That wouldn't be the problem would it? And if it is, what would I put in the head section and what would I put in the body section?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:400px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
var layer_1;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(45.0817001045586, -89.74025),
zoom: 6
});
var style = [
{
featureType: 'all',
elementType: 'all',
stylers: [
{ saturation: 11 }
]
}
];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col18",
from: "1_rIjSmE6MLjWMF4JH-OIzHFcYCjKr-8eytn9v6Y"
},
map: map,
styleId: 2,
templateId: 3
});
layer_1 = new google.maps.FusionTablesLayer({
query: {
select: "col4",
from: "1ZLOwVcCWsIA-1WNg_yICWjaRdWOTeVy9xpudaQ"
},
map: map
});
}
function changeMap_0() {
var whereClause;
var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'Counties' CONTAINS IGNORING CASE '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col18",
from: "1_rIjSmE6MLjWMF4JH-OIzHFcYCjKr-8eytn9v6Y",
where: whereClause
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label class="layer-wizard-search-label">
Counties
<input type="text" id="search-string_0">
<input type="button" onclick="changeMap_0()" value="Search">
</label>
</div>
</body>
</html>
Can somebody help me, because I have been doing this for days now. And have finally decided to actually ask for help. Any input you have would be greatly appreciated!
Thanks, Angie
Paste this:
<div id="map-canvas" style="width:500px; height:400px;"></div>
<div style="margin-top: 10px;">
<label class="layer-wizard-search-label">
Counties
<input type="text" id="search-string_0">
<input type="button" onclick="changeMap_0()" value="Search">
</label>
</div>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
var layer_1;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(45.0817001045586, -89.74025),
zoom: 6
});
var style = [
{
featureType: 'all',
elementType: 'all',
stylers: [
{ saturation: 11 }
]
}
];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col18",
from: "1_rIjSmE6MLjWMF4JH-OIzHFcYCjKr-8eytn9v6Y"
},
map: map,
styleId: 2,
templateId: 3
});
layer_1 = new google.maps.FusionTablesLayer({
query: {
select: "col4",
from: "1ZLOwVcCWsIA-1WNg_yICWjaRdWOTeVy9xpudaQ"
},
map: map
});
}
function changeMap_0() {
var whereClause;
var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'Counties' CONTAINS IGNORING CASE '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col18",
from: "1_rIjSmE6MLjWMF4JH-OIzHFcYCjKr-8eytn9v6Y",
where: whereClause
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
As it seems everything except the contents of <body> will be removed when you paste a complete HTML-source.
Using generated code from FusionTablesLayer Wizard, I am trying to determine how to open the info window onchange. The code below displays the marker perfectly, but I would like the info window to open when a different selection (state) is selected, rather than clicking on the marker to trigger info window. Thanks.
Followup:
Following geocodezip's remarks below, the following code works well and has given me a great start! Now to use drop down selector rather than sidebar links...
New working code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Fusion Table Markers and Sidebar</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['table']});
var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var us = new google.maps.LatLng(38.24676420846342, -94.82073772499997);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: us,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//sidebar to contain link to map marker - Sales Region - and Rep name
var sql = encodeURIComponent("SELECT 'State - Sales Region', 'Representative Contact', Lat, Lon FROM 5555555555 ORDER BY 'State - Sales Region'");
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + sql);
query.send(getData);
}
//simple sidebar and info window style
function getData(response) {
var dt = response.getDataTable();
var side_html = '<table style="border-collapse: collapse" border="1" \
cellpadding="5"> \
<thead> \
<tr style="background-color:#e0e0e0"> \
<th>Area</th> \
<th>Name</th> \
</tr> \
</thead> \
<tbody>';
for (var i = 0; i < dt.getNumberOfRows(); i++) {
var lat = dt.getValue(i,2);
var lng = dt.getValue(i,3);
var area = dt.getValue(i,0);
var pop = dt.getValue(i,1);
var pt = new google.maps.LatLng(lat, lng);
var html = "<strong>" + area + "</strong><br />" + pop;
side_html += '<tr> \
<td>' + area + '</td> \
<td>' + pop + '</td> \
</tr>';
createMarker(pt, html);
}
side_html += '</tbody> \
</table>';
document.getElementById("side_bar").innerHTML = side_html;
}
//use simple default marker
function createMarker(point,info) {
var marker = new google.maps.Marker({
position: point,
map: map
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
infoWindow.setContent(info);
infoWindow.open(map,marker);
});
}
function myclick(num) {
google.maps.event.trigger(markers[num], "click");
map.setCenter(markers[num].getPosition());
// map.setZoom(map.getZoom()+2);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 900px; height: 600px; position: absolute; left: 10px"></div>
<div id="side_bar" style="width: 200px; height: 600px; position: absolute; left: 920px; overflow: auto;"></div>
</body>
</html>
The only way to open an InfoWindow on a FusionTablesLayer by default is to click on it. To open it from an external event, one option is to create your own InfoWindow. retrieving the content by querying the FusionTable and opening on whatever external stimulus you want.
Example/proof of concept with a sidebar
Example from the documentation
I have written a Google Fusion Tables script I'm happy with (below), but it's loading only 500 rows of points in my table, which has over 20,000 rows. This is my first time in this neighborhood and I was really surprised to find the limit. Is there some way to load all the rows?
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>Points in box</title>
<link href="./stylesheets/example.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/images/favicon.ico" />
<noscript><meta http-equiv="refresh" content="0;url=/no_javascript.html"></noscript>
<!-- Find box coordinates javascript -->
<script type ="text/javascript" src="http://www.movable-type.co.uk/scripts/latlon.js"></script>
<!-- Type label text javascript -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./js/label.js"></script>
<!-- Visulization javascript -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!-- Initialize visualization -->
<script type="text/javascript">
google.load('visualization', '1', {});
</script>
</head>
<body class="developers examples examples_downloads examples_downloads_points-in-box examples_downloads_points-in-box_index">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var store_table = 4121905;
//send a call to GViz to retrieve lat/long coordinates of the stores
function getStoreData() {
//set the query using the input from the user
var queryText = encodeURIComponent("SELECT Latitude,Longitude,Impressions FROM " + store_table);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(doLoop);
}
function drawBox(topleftx, toplefty, bottomrightx, bottomrighty) {
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng( topleftx, toplefty ),
new google.maps.LatLng( bottomrightx, bottomrighty )
);
var overlay = new google.maps.Rectangle({
map: carto_map,
bounds: bounds,
strokeColor: "#0000ff",
strokeOpacity: 0.20,
strokeWeight: 2,
fillColor: "#0000ff",
fillOpacity: 0.050,
});
}
function doLoop(response) {
numRows = response.getDataTable().getNumberOfRows();
//Basic
var cartodbMapOptions = {
zoom: 7,
center: new google.maps.LatLng( 37.926868, -121.68457 ),
// center: new google.maps.LatLng( 40.7248057566452, -74.003 ),
// disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Init the map
carto_map = new google.maps.Map(document.getElementById("map"),cartodbMapOptions);
for(i = 0; i < numRows; i++) {
var centerX = response.getDataTable().getValue(i,0);
var centerY = response.getDataTable().getValue(i,1);
var imps = response.getDataTable().getValue(i,2);
var centerPoint = new LatLon(centerX,centerY);
var latLng = new google.maps.LatLng(centerX,centerY);
var toplefty = centerPoint.destinationPoint(-45, 6)._lon;
var topleftx = centerPoint.destinationPoint(-45, 7.7)._lat;
var bottomrighty = centerPoint.destinationPoint(135, 6)._lon;
var bottomrightx = centerPoint.destinationPoint(135, 7.7)._lat;
drawBox(topleftx, toplefty, bottomrightx, bottomrighty);
var marker = new google.maps.Marker({
position: latLng,
draggable: false,
markertext: imps,
flat: true,
map: carto_map
});
var label = new Label({
map: carto_map,
position: latLng,
draggable: true
});
label.bindTo('text', marker, 'markertext');
marker.setMap(null);
}
}
$(function() {
getStoreData();
});
</script>
<div id="map"></div>
</body>
</html>
I solved the problem by using the json call method. Code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>David's Build Up</title>
<link href="./stylesheets/example.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/images/favicon.ico" />
<noscript><meta http-equiv="refresh" content="0;url=/no_javascript.html"></noscript>
<!-- Find box coordinates javascript -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type ="text/javascript" src="http://www.movable-type.co.uk/scripts/latlon.js"></script>
<!-- Type label text javascript -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./js/label.js"></script>
<!-- Visulization javascript -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!-- Initialize visualization -->
<script type="text/javascript">
google.load('visualization', '1', {});
</script>
<script type="text/javascript">
function drawBox(topleftx, toplefty, bottomrightx, bottomrighty) {
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng( topleftx, toplefty ),
new google.maps.LatLng( bottomrightx, bottomrighty )
);
var overlay = new google.maps.Rectangle({
map: carto_map,
bounds: bounds,
strokeColor: "#0000ff",
strokeOpacity: 0.20,
strokeWeight: 2,
fillColor: "#0000ff",
fillOpacity: 0.050,
});
}
function initialize() {
// Set the map parameters
var cartodbMapOptions = {
zoom: 5 ,
center: new google.maps.LatLng( 40.313043, -97.822266 ),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Initialize the map
carto_map = new google.maps.Map(document.getElementById("map"),cartodbMapOptions);
// Query to grab the data
var query = "SELECT Latitude, Longitude, Impressions FROM " +
'[encrypted table ID here]';
var encodedQuery = encodeURIComponent(query);
// Construct the URL to grab the data
var url = ['https://www.googleapis.com/fusiontables/v1/query'];
url.push('?sql=' + encodedQuery);
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
url.push('&callback=?');
// Set the number of rows
var numRows = 3500;
// Get the variables from the table, in a loop
$.ajax({
url: url.join(''),
dataType: 'jsonp',
success: function (data) {
var rows = data['rows'];
var ftData = document.getElementById('ft-data');
for (var i in rows) {
var centerX = rows[i][0];
var centerY = rows[i][1];
var imps = rows[i][2];
// Set the center points
var centerPoint = new LatLon(centerX,centerY);
var latLng = new google.maps.LatLng(centerX,centerY);
// Set top left points
var toplefty = centerPoint.destinationPoint(-45, 6)._lon;
var topleftx = centerPoint.destinationPoint(-45, 7.7)._lat;
// Set bottom right points
var bottomrighty = centerPoint.destinationPoint(135, 6)._lon;
var bottomrightx = centerPoint.destinationPoint(135, 7.7)._lat;
// Draw the box
drawBox(topleftx, toplefty, bottomrightx, bottomrighty);
// Drop markers
var marker = new google.maps.Marker({
position: latLng,
draggable: false,
markertext: imps,
flat: true,
map: carto_map
});
var label = new Label({
map: carto_map,
position: latLng,
draggable: true
});
label.bindTo('text', marker, 'markertext');
marker.setMap(null);
};
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
<div id="ft-data"></div>
</body>
</html>
The Gviz API does have a 500 row limit for a given query.
Any table is limited to 100,000 mappable rows, but that's well outside your reported 20,000 rows.
The new Javascript API, currently accepting Trusted Testers, offers JSON format support for any number of rows returned for a query. You can apply for the TT program by requesting membership in this group:
https://groups.google.com/group/fusion-tables-api-trusted-testers
-Rebecca
The fusiontables/gvizdata URL is intended for Gviz charts and so is limited to 500 points. There are other ways to query that don't have that limitation. See https://developers.google.com/fusiontables/docs/sample_code for examples.
I routinely refresh a 2500 row table by deleting all rows and inserting new ones. The loop in my code that constructs the INSERT sql has a nested loop that just counts to 400, sends that sql, and then starts building another one with the next 400 records.