I've been trying to learn how to have a map pan and zoom based on a query return. I have it mostly working, except I get "Data may still be loading" error, each time the map zooms in. The map is zooming to the right location.
I know I must have a syntax error somewhere, but being so new to Fusion Tables, I can't find it.
Any help would be appreciated:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Assembly Map</title>
<style>
#map_canvas { width: 610px; height: 400px; }
</style>
<!--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" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
var map;
var layer;
var tableid = '16DRI3M2060Ui9S__E9uajhWrLznEJPjUpvqpfudc';
var layer2;
var tableid2 = '16DRI3M2060Ui9S__E9uajhWrLznEJPjUpvqpfudc';
function initialize() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(49.99775728108552, -88.70237663424376),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'geometry' FROM " + tableid);
layer.setMap(map);
layer2 = new google.maps.FusionTablesLayer(tableid2);
layer2.setQuery("SELECT 'geometry' FROM " + tableid2 + " WHERE Riding");
layer2.setMap(map);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
{
function changeMap() {
var searchString = document.getElementById('searchString').value.replace("'", "\\'");
if(searchString == "") {
var query="SELECT 'geometry' FROM " + tableid;
} else {
var query="SELECT 'geometry' FROM " + tableid + " WHERE 'Riding' = '" + searchString + "'";
}
layer.setQuery(query);
zoom2query(query);
}
}
function zoom2query(query) {
// zoom and center map on query results
//set the query using the parameter
var queryText = encodeURIComponent(query);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(zoomTo);
}
function zoomTo(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 kml = FTresponse.getDataTable().getValue(0,0);
// create a geoXml3 parser for the click handlers
var geoXml = new geoXML3.parser({
map: map,
zoom: false
});
geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
geoXml.docs[0].gpolygons[0].setMap(null);
map.fitBounds(geoXml.docs[0].gpolygons[0].bounds);
/*
var bounds = new google.maps.LatLngBounds();
for(i = 0; i < numRows; i++) {
var point = new google.maps.LatLng(
parseFloat(response.getDataTable().getValue(i, 0)),
parseFloat(response.getDataTable().getValue(i, 1)));
bounds.extend(point);
}
// zoom to the bounds
map.fitBounds(bounds);
*/
}
</script>
<body onload="initialize();">
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label><span class="style58">Select Riding</span> </label>
<select id="searchString" onChange="changeMap(this.value);">
<option value="">--Ridings--</option>
<option value="--Select--">--Select--</option>
<option value="AJAX--PICKERING">AJAX--PICKERING</option>
<option value="ALGOMA--MANITOULIN">ALGOMA--MANITOULIN</option>
<option value="ANCASTER--DUNDAS--FLAMBOROUGH--WESTDALE">ANCASTER--DUNDAS--FLAMBOROUGH--WESTDALE</option>
<option value="BARRIE">BARRIE</option>
<option value="BEACHES--EAST YORK">BEACHES--EAST YORK</option>
<option value="BRAMALEA--GORE--MALTON">BRAMALEA--GORE--MALTON</option>
<option value="BRAMPTON WEST">BRAMPTON WEST</option>
<option value="BRAMPTON--SPRINGDALE">BRAMPTON--SPRINGDALE</option>
<option value="BRANT">BRANT</option>
<option value="BRUCE--GREY--OWEN SOUND">BRUCE--GREY--OWEN SOUND</option>
<option value="BURLINGTON">BURLINGTON</option>
<option value="CAMBRIDGE">CAMBRIDGE</option>
<option value="CARLETON--MISSISSIPPI MILLS">CARLETON--MISSISSIPPI MILLS</option>
<option value="CHATHAM--KENT--ESSEX">CHATHAM--KENT--ESSEX</option>
<option value="DAVENPORT">DAVENPORT</option>
<option value="DON VALLEY EAST">DON VALLEY EAST</option>
<option value="DON VALLEY WEST">DON VALLEY WEST</option>
<option value="DUFFERIN--CALEDON">DUFFERIN--CALEDON</option>
<option value="DURHAM">DURHAM</option>
<option value="EGLINTON--LAWRENCE">EGLINTON--LAWRENCE</option>
<option value="ELGIN--MIDDLESEX--LONDON">ELGIN--MIDDLESEX--LONDON</option>
<option value="ESSEX">ESSEX</option>
<option value="ETOBICOKE CENTRE">ETOBICOKE CENTRE</option>
<option value="ETOBICOKE NORTH">ETOBICOKE NORTH</option>
<option value="ETOBICOKE--LAKESHORE">ETOBICOKE--LAKESHORE</option>
<option value="GLENGARRY--PRESCOTT--RUSSELL">GLENGARRY--PRESCOTT--RUSSELL</option>
<option value="GUELPH">GUELPH</option>
<option value="HALDIMAND--NORFOLK">HALDIMAND--NORFOLK</option>
<option value="HALIBURTON--KAWARTHA LAKES--BROCK">HALIBURTON--KAWARTHA LAKES--BROCK</option>
<option value="HALTON">HALTON</option>
<option value="HAMILTON CENTRE">HAMILTON CENTRE</option>
<option value="HAMILTON EAST--STONEY CREEK">HAMILTON EAST--STONEY CREEK</option>
<option value="HAMILTON MOUNTAIN">HAMILTON MOUNTAIN</option>
<option value="HURON--BRUCE">HURON--BRUCE</option>
<option value="KENORA--RAINY RIVER">KENORA--RAINY RIVER</option>
<option value="KINGSTON AND THE ISLANDS">KINGSTON AND THE ISLANDS</option>
<option value="KITCHENER CENTRE">KITCHENER CENTRE</option>
<option value="KITCHENER--CONESTOGA">KITCHENER--CONESTOGA</option>
<option value="KITCHENER--WATERLOO">KITCHENER--WATERLOO</option>
<option value="LAMBTON--KENT--MIDDLESEX">LAMBTON--KENT--MIDDLESEX</option>
<option value="LANARK--FRONTENAC--LENNOX AND ADDINGTON">LANARK--FRONTENAC--LENNOX AND ADDINGTON</option>
<option value="LEEDS--GRENVILLE">LEEDS--GRENVILLE</option>
<option value="LONDON NORTH CENTRE">LONDON NORTH CENTRE</option>
<option value="LONDON WEST">LONDON WEST</option>
<option value="LONDON--FANSHAWE">LONDON--FANSHAWE</option>
<option value="MARKHAM--UNIONVILLE">MARKHAM--UNIONVILLE</option>
<option value="MISSISSAUGA EAST--COOKSVILLE">MISSISSAUGA EAST--COOKSVILLE</option>
<option value="MISSISSAUGA SOUTH">MISSISSAUGA SOUTH</option>
<option value="MISSISSAUGA--BRAMPTON SOUTH">MISSISSAUGA--BRAMPTON SOUTH</option>
<option value="MISSISSAUGA--ERINDALE">MISSISSAUGA--ERINDALE</option>
<option value="MISSISSAUGA--STREETSVILLE">MISSISSAUGA--STREETSVILLE</option>
<option value="NEPEAN--CARLETON">NEPEAN--CARLETON</option>
<option value="NEWMARKET--AURORA">NEWMARKET--AURORA</option>
<option value="NIAGARA FALLS">NIAGARA FALLS</option>
<option value="NIAGARA WEST--GLANBROOK">NIAGARA WEST--GLANBROOK</option>
<option value="NICKEL BELT">NICKEL BELT</option>
<option value="NIPISSING">NIPISSING</option>
<option value="NORTHUMBERLAND--QUINTE WEST">NORTHUMBERLAND--QUINTE WEST</option>
<option value="OAK RIDGES--MARKHAM">OAK RIDGES--MARKHAM</option>
<option value="OAKVILLE">OAKVILLE</option>
<option value="OSHAWA">OSHAWA</option>
<option value="OTTAWA CENTRE">OTTAWA CENTRE</option>
<option value="OTTAWA SOUTH">OTTAWA SOUTH</option>
<option value="OTTAWA WEST--NEPEAN">OTTAWA WEST--NEPEAN</option>
<option value="OTTAWA--ORLEANS">OTTAWA--ORLEANS</option>
<option value="OTTAWA--VANIER">OTTAWA--VANIER</option>
<option value="OXFORD">OXFORD</option>
<option value="PARKDALE--HIGH PARK">PARKDALE--HIGH PARK</option>
<option value="PARRY SOUND--MUSKOKA">PARRY SOUND--MUSKOKA</option>
<option value="PERTH--WELLINGTON">PERTH--WELLINGTON</option>
<option value="PETERBOROUGH">PETERBOROUGH</option>
<option value="PICKERING--SCARBOROUGH EAST">PICKERING--SCARBOROUGH EAST</option>
<option value="PRINCE EDWARD--HASTINGS">PRINCE EDWARD--HASTINGS</option>
<option value="RENFREW--NIPISSING--PEMBROKE">RENFREW--NIPISSING--PEMBROKE</option>
<option value="RICHMOND HILL">RICHMOND HILL</option>
<option value="SARNIA--LAMBTON">SARNIA--LAMBTON</option>
<option value="SAULT STE. MARIE">SAULT STE. MARIE</option>
<option value="SCARBOROUGH CENTRE">SCARBOROUGH CENTRE</option>
<option value="SCARBOROUGH SOUTHWEST">SCARBOROUGH SOUTHWEST</option>
<option value="SCARBOROUGH--AGINCOURT">SCARBOROUGH--AGINCOURT</option>
<option value="SCARBOROUGH--GUILDWOOD">SCARBOROUGH--GUILDWOOD</option>
<option value="SCARBOROUGH--ROUGE RIVER">SCARBOROUGH--ROUGE RIVER</option>
<option value="SIMCOE NORTH">SIMCOE NORTH</option>
<option value="SIMCOE--GREY">SIMCOE--GREY</option>
<option value="ST. CATHARINES">ST. CATHARINES</option>
<option value="ST. PAUL'S">ST. PAUL'S</option>
<option value="STORMONT--DUNDAS--SOUTH GLENGARRY">STORMONT--DUNDAS--SOUTH GLENGARRY</option>
<option value="SUDBURY">SUDBURY</option>
<option value="THORNHILL">THORNHILL</option>
<option value="THUNDER BAY--ATIKOKAN">THUNDER BAY--ATIKOKAN</option>
<option value="THUNDER BAY--SUPERIOR NORTH">THUNDER BAY--SUPERIOR NORTH</option>
<option value="TIMISKAMING--COCHRANE">TIMISKAMING--COCHRANE</option>
<option value="TIMMINS--JAMES BAY">TIMMINS--JAMES BAY</option>
<option value="TORONTO CENTRE">TORONTO CENTRE</option>
<option value="TORONTO--DANFORTH">TORONTO--DANFORTH</option>
<option value="TRINITY--SPADINA">TRINITY--SPADINA</option>
<option value="VAUGHAN">VAUGHAN</option>
<option value="WELLAND">WELLAND</option>
<option value="WELLINGTON--HALTON HILLS">WELLINGTON--HALTON HILLS</option>
<option value="WHITBY--OSHAWA">WHITBY--OSHAWA</option>
<option value="WILLOWDALE">WILLOWDALE</option>
<option value="WINDSOR WEST">WINDSOR WEST</option>
<option value="WINDSOR--TECUMSEH">WINDSOR--TECUMSEH</option>
<option value="YORK CENTRE">YORK CENTRE</option>
<option value="YORK SOUTH--WESTON">YORK SOUTH--WESTON</option>
<option value="YORK WEST ">YORK WEST </option>
<option value="YORK--SIMCOE">YORK--SIMCOE</option>
</select>
</label>
</div>
<br>
<div id="map_canvas"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</body>
</html>
This fixes the problem:
function initialize() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(49.99775728108552, -88.70237663424376),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'geometry' FROM " + tableid);
// layer.setMap(map);
layer2 = new google.maps.FusionTablesLayer(tableid2);
layer2.setQuery("SELECT 'geometry' FROM " + tableid2 + " WHERE Riding");
layer2.setMap(map);
}
Related
I have a dropdown select of optional 'opportunities' (id="opportunities" in the example below) which I enhance using the select2 jquery plugin, and wish to dynamically filter this list in order to reduce the possible options presented to a user using a 2nd select dropdown (id="group-select" in the example below),
<label>
Select an opportunity<br>
<select id="opportunities" style="width:300px;" multiple="multiple" name="selected-opps" value="">
<optgroup label="Class A">
<option class="group-1" value="1a">Opportunity 1a</option>
<option class="group-2" value="2a">Opportunity 2a</option>
</optgroup>
<optgroup label="Class B">
<option class="group-1" value="1b">Opportunity 1b</option>
<option class="group-2" value="2b">Opportunity 2b</option>
</optgroup>
<optgroup label="Class C">
<option class="group-1" value="1c">Opportunity 1c</option>
<option class="group-2" value="2c">Opportunity 2c</option>
</optgroup>
</select>
</label>
<select id="group-select">
<option value="">Select a group</option>
<option value="group-1">group 1</option>
<option value="group-2">group 2</option>
</select>
</div>
<div id="select-opportunity"></div>
<script type="text/javascript">
(function( $ ) {
'use strict';
var opportunities = $('select#opportunities').select2({
dropdownParent: $('#select-opportunity')
});
})( jQuery );
</script>
I wish to be able to make a selection in the 2nd select, say 'group 1' and would like the select2 list to contain only 'group-1' items as per the option in the first select dropdown that have the grouo-1 class attribute.
I managed to solve this using 2 optional functionality provided by the select2 plugin, namely the ability to control the way items are built and displayed using the templating functionality, and using the programmatic control exposed in the plugin. I replaced the javascript appended below the example in the question with,
<script type="text/javascript">
(function( $ ) {
'use strict';
var opportunities = $('select#opportunities').select2({
dropdownParent: $('#select-opportunity'),
templateResult: formatItem
});
function formatItem (state) {
if (!state.id) { return state.text; }
//change the id of our select2 items
state._resultId = state._resultId+'-'+state.element.className;
var $state = $(
'<span class="opportunity-item ' + state.element.className + '">' + state.text + '</span>'
);
return $state;
}
$('select#group-select').change( function() {
//hide the unwanted options
var group = $('select#group-select option:selected').val();
//clear the styling element
$('style#select2-style').empty();
if(group){
//if a group is selected we need to hide all the others
$('select#group-select option').not(':selected').each(function(){
group = $(this).val();
if(group){
$('style#select2-style').append(
'li[id$="'+group+'"]{display:none;}'
);
}
});
}
//force the select2 to referesh by opening and closing it again
opportunities.select2('open');
opportunities.select2('close');
});
})( jQuery );
</script>
<style id="select2-style"></style>
I have also added an empty <style> element at the bottom in which I dynamically create the rules required to hide the unwanted items.
The logic
The code above creates templating function formatItem that the select2 plugin will use to format the items. The item state object is passed to the function which includes the unique id for each item.
This id is modified by appending the class of the corresponding option element.
When a group option is selected in the 2nd dropdown select (#group-select) a set of styling is created and appended to the bottom <style> element to hide all the elements whose id attributes end with the class names to be hidden, for example if one seleced group-1, the code will create a style to hide group-2 items,
li[id$="group-2"] {
display:none;
}
However for this to work we need to force the select2 dropdown to refresh to pick up the new styling and the only way I found for this work was to use the programmatic control of the plugin to 'open' and immediately 'close' the select2 dropdown.
ّshort Example .
window.templateResult = function templateResult(state) {
if (state.text.indexOf('ss') == -1)
return null;///hide
if (!state.id) { return state.text; }
var $state = $(
'<span>' + state.text + '</span>'
);
return $state;
};
//Init
$("#select1").select2({
templateResult: templateResult
});
ّFull Example below.
$(document).ready(function () {
//general custom filter
window.Select2FilterFunc = function (state) { return "Default" };
//general custom templateResult
window.templateResult = function templateResult(state) {
//call custom filter
var result = Select2FilterFunc(state);
if (result != "Default")
return result;
if (!state.id) { return state.text; }
var $state = $(
'<span>' + state.text + '</span>'
);
return $state;
};
//Init
$("#select1").select2({
templateResult: templateResult
});
//Add Custom Filter when opening
$('#select1').on('select2:opening', function (evt) {
//set your filter
window.Select2FilterFunc = function (state) {
if (state.text.indexOf('ss') == -1)
return null;//hide item
else
return "Default";
};
}).on('select2:close', function (evt) {
window.Select2FilterFunc = function (state) { return "Default" };
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="select1" class="js-states form-control" style="width:300px" multiple="multiple ">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK" title="11111111">Alaska</option>
<option value="HI" title="2222">Hawaii </option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
I am trying to change the date layout which spans for 100 years back from current date. The present layout is that on selection of a date from calendar pop up, that date will be shown in a textbox. But as per the requirement layout should be such that the user can choose the date from 3 distinct dropdowns of day,month and year. Gui is ::
The existing layout is achieved through a javascript function :
/** function nonlogincalendarsetup(flddat, anchor ,format, offsetyrs)
flddat : field name where calendar date will be stored
anchor : to show div relative to anchor (calendar image)
format : date format
prevyrs : number of previous years to display
nextyrs : number of next years to display
Added check for flddate: If the text field for the date picker is disabled then return without initializing the calendar.
**/
function nonlogincalendarsetup (flddat, anchor, format, prevyrs, nextyrs) {
if (flddat.disabled) {
return;
}
var anchorid = "#" + anchor;
var caldate = flddat;
var prevyear = prevyrs;
var nextyear = nextyrs;
var yrstart, yrend, l_yrrange;
if (flddat.id == null || flddat.id == "") {
caldate.setAttribute("id",flddat.name);
} else {
caldate.setAttribute("id",flddat.id);
}
if (prevyrs == undefined || nextyrs == undefined ) {
yrstart = year - 20;
yrend = year + 20;
l_yrrange = yrstart + ":" + yrend;
} else {
year='<xsl:value-of select="java:format(java:java.text.SimpleDateFormat.new('yyyy'), java:java.util.Date.new())" />';
year=parseInt(year);
yrstart = year - prevyear;
yrend = year + nextyrs;
l_yrrange = yrstart + ":" + yrend;
}
$("#" + caldate.id).datepicker({
yearRange: l_yrrange,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
defaultDate: cal_date
}).show();
if ($.datepicker._datepickerShowing && $.datepicker._lastInput == caldate)
$.datepicker._hideDatepicker();
else
$.datepicker._showDatepicker(caldate);
}
What I could do is I defined days, month names, couple of years in <select> <option> tags like :
<div class="demo">
<p id="fullDate" ></p>
<select id="month" name="month">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="day" name="day">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="year" name="year">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
and the result was:
However this arrangement will be static. It won't take up current year "itself" as in standard datepicker layouts.
Is there any way I can manipulate those lines below to insert them in the dropdown field ids?
$("#" + caldate.id).datepicker({
yearRange: l_yrrange,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
defaultDate: cal_date
}).show();
if ($.datepicker._datepickerShowing && $.datepicker._lastInput == caldate)
$.datepicker._hideDatepicker();
else
$.datepicker._showDatepicker(caldate);
Where can I access the codes of datepicker._showDatepicker(); datepicker._lastInput etc.. ? Please guide.
Not sure if this is what you're looking for. Please comment or update your post. Working Example: https://jsfiddle.net/Twisty/9kcog02f/6/
HTML
<label for="startDate">Date of Birth<em>*</em>:</label>
<input class="date-picker" style="border: 0; height: 0; width: 0;" />
<select id="bMon" class='datePart'></select>
<select id="bDay" class='datePart'></select>
<select id="bYear" class='datePart'></select>
Change
JQuery
$(function() {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
maxDate: new Date(),
minDate: new Date(1998 - 82, 1, 1),
yearRange: "1916:2016",
dateFormat: 'MM-dd-yy',
defaultDate: new Date(1998, 0, 1),
onClose: function(dt, dp) {
var parts = dt.split("-");
var mm = parts[0], dd = parts[1], yy = parts[2];
console.log(mm,dd,yy);
$("#bMon").append("<option selected='selected'>" + mm + "</option>");
$("#bDay").append("<option selected='selected'>" + dd + "</option>");
$("#bYear").append("<option selected='selected'>" + yy + "</option>");
$(".datePart").show("slow");
}
});
$("#setDate").click(function(e) {
e.preventDefault();
$(".date-picker").datepicker("show");
});
});
This gives you the 100 Year range, formats the results into 3 select items, and can be changed later. I picked a year that would make a person 18 as the default, but of course you can do any other date too.
i try this sample code by https://developers.google.com/maps/documentation/javascript/examples/directions-panel
but if I use it does not show me anything i must use it in a project with rails and jquerymobile and my file is this:
'<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Displaying text directions with <code>setPanel()</code></title>
<link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
<style>
#directions-panel {
height: 100%;
float: right;
width: 390px;
overflow: auto;
}
#map-canvas {
margin-right: 400px;
}
#control {
background: #fff;
padding: 5px;
font-size: 14px;
font-family: Arial;
border: 1px solid #ccc;
box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
display: none;
}
#media print {
#map-canvas {
height: 500px;
margin: 0;
}
#directions-panel {
float: none;
width: auto;
}
}
</style>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.850033, -87.6500523)
};
var map = new google.maps.Map(document.getElementById('map-canvas2'),
mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="control">
<strong>Start:</strong>
<select id="start" onchange="calcRoute();">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End:</strong>
<select id="end" onchange="calcRoute();">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
</div>
<div id="directions-panel"></div>
<div id="map-canvas2"></div>
</body>
</html>
it show only for a second the botton start and end where is the problem...?
The map doesn't have a size. It needs both a height and a width. This works for me:
<div id="map-canvas2" style="height:500px; width:600px;"></div>
working example
<script type="text/javascript" src="http://maps.google.com/maps/api /js?sensor=false"> </script>
<script src="json2.js"></script>
<script type="text/javascript">
var map, ren, ser;
var data = {};
function get_latitude_longitude()
{
var geocoder = new google.maps.Geocoder();
var address1 = document.getElementById("start").value;
geocoder.geocode( { 'address': address1}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location1 = results[0].geometry.location;
//alert(location1);
var latitude1 = results[0].geometry.location.lat();
var longitude1 = results[0].geometry.location.lng();
var results1 = latitude1+", "+longitude1;
//alert(results1);
document.googlemapfrm.f_r1.value = latitude1;
document.googlemapfrm.f_r2.value = longitude1;
document.googlemapfrm.location1.value = location1;
//l_r
}
});
var geocoder = new google.maps.Geocoder();
var address2 = document.getElementById("end").value;
geocoder.geocode( { 'address': address2}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location2 = results[0].geometry.location;
var latitude2 = results[0].geometry.location.lat();
var longitude2 = results[0].geometry.location.lng();
var results2 = latitude2+", "+longitude2;
document.googlemapfrm.l_r1.value = latitude2;
document.googlemapfrm.l_r2.value = longitude2;
// alert(longitude2);
document.googlemapfrm.location2.value = location2;
}
});
}
function goma()
{
map = new google.maps.Map( document.getElementById('mappy'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(27.6094, 75.13991099999998) })
ren = new google.maps.DirectionsRenderer( {'draggable':true} );
ren.setMap(map);
ren.setPanel(document.getElementById("directionsPanel"));
ser = new google.maps.DirectionsService();
ser.route({ 'origin': new google.maps.LatLng(document.getElementById('f_r1').value,document.getElementById('f_r2').va lue), 'destination': new google.maps.LatLng(document.getElementById('l_r1').value,document.getElementById('l_r2').va lue), 'waypoints':[{location: document.getElementById('waypoint_now').value}], 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
if(sts=='OK')ren.setDirections(res);
})
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="json2.js"></script>
<script type="text/javascript">
var map, ren, ser;
var data = {};
function get_latitude_longitude()
{
var geocoder = new google.maps.Geocoder();
var address1 = document.getElementById("start").value;
geocoder.geocode( { 'address': address1}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location1 = results[0].geometry.location;
//alert(location1);
var latitude1 = results[0].geometry.location.lat();
var longitude1 = results[0].geometry.location.lng();
var results1 = latitude1+", "+longitude1;
//alert(results1);
document.googlemapfrm.f_r1.value = latitude1;
document.googlemapfrm.f_r2.value = longitude1;
document.googlemapfrm.location1.value = location1;
//l_r
}
});
var geocoder = new google.maps.Geocoder();
//var address2 = "Bikaner ,IND";
var address2 = document.getElementById("end").value;
geocoder.geocode( { 'address': address2}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location2 = results[0].geometry.location;
var latitude2 = results[0].geometry.location.lat();
var longitude2 = results[0].geometry.location.lng();
var results2 = latitude2+", "+longitude2;
document.googlemapfrm.l_r1.value = latitude2;
document.googlemapfrm.l_r2.value = longitude2;
// alert(longitude2);
document.googlemapfrm.location2.value = location2;
}
});
}
function goma()
{
map = new google.maps.Map( document.getElementById('mappy'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(27.6094, 75.13991099999998) })
ren = new google.maps.DirectionsRenderer( {'draggable':true} );
ren.setMap(map);
ren.setPanel(document.getElementById("directionsPanel"));
ser = new google.maps.DirectionsService();
ser.route({ 'origin': new google.maps.LatLng(document.getElementById('f_r1').value,document.getElementById('f_r2').value), 'destination': new google.maps.LatLng(document.getElementById('l_r1').value,document.getElementById('l_r2').value), 'waypoints':[{location: document.getElementById('waypoint_now').value}], 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
if(sts=='OK')ren.setDirections(res);
})
}
</script>
<body>
<div id="mappy" style="float:left;width:70%; height:100%"></div>
<!--<div id="map-canvas" style="float:left;width:70%; height:100%"></div>-->
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
<form name="googlemapfrm" method="post">
<div>
<strong>Start: </strong>
<select id="start" >
<option value="Jaipur">Jaipur</option>
<option value="jagatpura">jagatpura</option>
<option value="malviya nagar, Jaipur">Malviya Nagar</option>
<option value="Sikar">Sikar</option>
<option value="Alwar">Alwar</option>
<option value="Luniawas">Luniyawas</option>
<option value="Karoli">Karoli</option>
<option value="Baran">Baran</option>
<option value="Sawai Madhopur">Sawai Madhopur</option>
<option value="bassi">bassi</option>
<option value="goner">Goner</option>
<option value="lalsot">Lalsot</option>
<option value="Chomu">Chomu</option>
<option value="Ajmer">Ajmer</option>
<option value="Rigas">Rigas</option>
<option value="Khatu">Khatu</option>
<option value="Udaipur">Udaipur</option>
<option value="Bikaner">Bikaner</option>
<option value="Churu">Churu</option>
</select>
<strong><br><br>End: </strong>
<select id="end" onChange="get_latitude_longitude()">
<option value="Jaipur">Jaipur</option>
<option value="jagatpura">jagatpura</option>
<option value="malviya nagar, Jaipur">Malviya Nagar</option>
<option value="Sikar">Sikar</option>
<option value="Alwar">Alwar</option>
<option value="Luniawas">Luniyawas</option>
<option value="Karoli">Karoli</option>
<option value="Baran">Baran</option>
<option value="bassi">bassi</option>
<option value="goner">Goner</option>
<option value="lalsot">Lalsot</option>
<option value="Chomu">Chomu</option>
<option value="Ajmer">Ajmer</option>
<option value="Rigas">Rigas</option>
<option value="Khatu">Khatu</option>
<option value="Sawai Madhopur">Sawai Madhopur</option>
<option value="Udaipur">Udaipur</option>
<option value="Bikaner">Bikaner</option>
<option value="Churu">Churu</option>
</select>
<strong><br><br>Waypoint: </strong>
<select id="waypoint_now" >
<option value="Jaipur">Jaipur</option>
<option value="bassi">bassi</option>
<option value="goner">Goner</option>
<option value="lalsot">Lalsot</option>
<option value="Chomu">Chomu</option>
<option value="Ajmer">Ajmer</option>
<option value="Rigas">Rigas</option>
<option value="Khatu">Khatu</option>
<option value="Sawai Madhopur">Sawai Madhopur</option>
<option value="Sikar">Sikar</option>
<option value="Bikaner">Bikaner</option>
<option value="Churu">Churu</option
</select>
</div>
<div id="distance_direct" > </div>
<input type="hidden" name="location1" id="location1" >
<input type="hidden" name="location2" id="location2" >
<input type="hidden" name="f_r1" id="f_r1" >
<input type="hidden" name="f_r2" id="f_r2" >
<input type="hidden" name="l_r1" id="l_r1" >
<input type="hidden" name="l_r2" id="l_r2" >
<br><br> <input type="button" value="Show Map" onClick="return goma(); ">
</form>
</body>
I am creating a dependent drop down list of states & city in jquery mobile. which is not working for me. I am unable to hide the 2nd drop down too. The code i am using is:
The html:
<select name="selectmenu5" id="selectmenu5">
<option value="0">Select State</option>
<option value="1">Andaman and Nicobar</option>
<option value="2">Andhra Pradesh</option>
</select>
<select name="selectmenu4" id="selectmenu4">
<option class="city" id="1">Select City</option>
<option class="city" id="2">option 2</option>
<option class="city" id="3">Option 3</option>
</select>
and the js:
$(document).ready(function() {
$("#selectmenu4").hide();
$("#selectmenu5").live("change",function() {
$("#selectmenu4").show();
switch($("#this").val()){
case "1":
$(".city").hide().parent().find("#1").show();
break;
case "2":
$(".city").hide().parent().find("#2").show();
break;
}
});
});
Is this what you want? jsFiddle: http://jsfiddle.net/WXbbj/40/
Create all the selects:
<select name="selectmenu5" id="selectmenu5">
<option value="0">Select State</option>
<option value="1">Andaman and Nicobar</option>
<option value="2">Andhra Pradesh</option>
<select class='cityList' name="selectmenu1" id="selectmenu1">
<option class="city" id="0">Select City</option>
<option class="city" id="1">city1</option>
<option class="city" id="2">city2</option>
</select>
<select class='cityList' id="selectmenu2">
<option class="city" id="0">Select City</option>
<option class="city" id="1">city3</option>
<option class="city" id="2">city4</option>
</select>
Basically i use css to hide the "selectmenu" :
#selectmenu1,#selectmenu2{
display:none;
}
And this is the jquery function to show only the right options:
$(document).ready(function() {
$("#selectmenu5").on("change",function() {
$(".cityList").hide();
$("#selectmenu"+$(this).val()).show();
}); });
I saved this code as an html file, but I'm not being able to visualize the map. I took the code directly from FusionTablesLayer Wizard 2.0. Is it something wrong with the code? I thought that it would be 'ready to use'. I need some help!
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:400px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(0, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'geometry'",
from: 1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc
},
map: map
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'geometry'",
from: 1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc,
where: "'NOME' = '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Escolha a cidade</label>
<select id="search-string-l0" onchange="changeMapl0(this.value);">
<option value="">--Select--</option>
<option value="ALVORADA">ALVORADA</option>
<option value="ARARICA">ARARICA</option>
<option value="ARROIO DOS RATOS">ARROIO DOS RATOS</option>
<option value="CACHOEIRINHA">CACHOEIRINHA</option>
<option value="CAMPO BOM">CAMPO BOM</option>
<option value="CANOAS">CANOAS</option>
<option value="CAPELA DE SANTANA">CAPELA DE SANTANA</option>
<option value="CHARQUEADAS">CHARQUEADAS</option>
<option value="DOIS IRMAOS">DOIS IRMAOS</option>
<option value="ELDORADO DO SUL">ELDORADO DO SUL</option>
<option value="ESTANCIA VELHA">ESTANCIA VELHA</option>
<option value="ESTEIO">ESTEIO</option>
<option value="GLORINHA">GLORINHA</option>
<option value="GRAVATAI">GRAVATAI</option>
<option value="GUAIBA">GUAIBA</option>
<option value="IVOTI">IVOTI</option>
<option value="MONTENEGRO">MONTENEGRO</option>
<option value="NOVA HARTZ">NOVA HARTZ</option>
<option value="NOVA SANTA RITA">NOVA SANTA RITA</option>
<option value="NOVO HAMBURGO">NOVO HAMBURGO</option>
<option value="PAROBE">PAROBE</option>
<option value="PORTAO">PORTAO</option>
<option value="PORTO ALEGRE">PORTO ALEGRE</option>
<option value="ROLANTE">ROLANTE</option>
<option value="SANTO ANTONIO DA PATRULHA">SANTO ANTONIO DA PATRULHA</option>
<option value="SAO JERONIMO">SAO JERONIMO</option>
<option value="SAO LEOPOLDO">SAO LEOPOLDO</option>
<option value="SAPIRANGA">SAPIRANGA</option>
<option value="SAPUCAIA DO SUL">SAPUCAIA DO SUL</option>
<option value="TAQUARA">TAQUARA</option>
<option value="TRIUNFO">TRIUNFO</option>
<option value="VIAMAO">VIAMAO</option>
</select>
</div>
</body>
</html>
The only missing thing are the quotes around the encoded table ids :-)
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(0, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'geometry'",
from: "1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc"
},
map: map
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'geometry'",
from: "1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc",
where: "'NOME' = '" + searchString + "'"
}
});
}
I put your code on jsFiddle with my correction.
My understanding was that the encrypted doc id's only apply to the Fusion Table API but not to the GMaps API for Fusion Table layers. Visit your table via the FT UI and select File -> About which will display both the Encrypted Id and the Numeric ID. Try using the Numeric ID instead of the encrypted id:
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'geometry'",
from: 1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc // change this to numeric id
},