fusion tables map isn't showing - google-fusion-tables

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
},

Related

Rails: Select on 1 field returns value to another field [duplicate]

here is my html.
<select id="type">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select id="size">
<option value="">-- select one -- </option>
</select>
here is the jquery i tried but was unsuccessful.
$(document).ready(function() {
if( $("#type").val("item1"))
{
$("#size").html("<option value='test'>test</option><option value="test2">test2</option>);
}
elseif( $("#type").val("item2"))
{
$("#size").html("<option value='anothertest1'>anothertest1</option>");
}
});
basically what i'm trying to do is if an option is selected in #type then the size select is populated with options associated to it. how can i do this?
thanks

Here is an example of what you are trying to do => fiddle
$(document).ready(function () {
$("#type").change(function () {
var val = $(this).val();
if (val == "item1") {
$("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
} else if (val == "item2") {
$("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
} else if (val == "item3") {
$("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
} else if (val == "item0") {
$("#size").html("<option value=''>--select one--</option>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="type">
<option value="item0">--Select an Item--</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select id="size">
<option value="">-- select one -- </option>
</select>

you can use data-tag in html5 and do this using this code:
<script>
$('#mainCat').on('change', function() {
var selected = $(this).val();
$("#expertCat option").each(function(item){
console.log(selected) ;
var element = $(this) ;
console.log(element.data("tag")) ;
if (element.data("tag") != selected){
element.hide() ;
}else{
element.show();
}
}) ;
$("#expertCat").val($("#expertCat option:visible:first").val());
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<select id="mainCat">
<option value = '1'>navid</option>
<option value = '2'>javad</option>
<option value = '3'>mamal</option>
</select>
<select id="expertCat">
<option value = '1' data-tag='2'>UI</option>
<option value = '2' data-tag='2'>Java Android</option>
<option value = '3' data-tag='1'>Web</option>
<option value = '3' data-tag='1'>Server</option>
<option value = '3' data-tag='3'>Back End</option>
<option value = '3' data-tag='3'>.net</option>
</select>

Here is my simple solution using Jquery filters.
$('#publisher').on('change', function(e) {
let selector = $(this).val();
$("#site > option").hide();
$("#site > option").filter(function(){return $(this).data('pub') == selector}).show();
});
JSFIDDLE

You can use switch case like this:
$(document).ready(function () {
$("#type").change(function () {
switch($(this).val()) {
case 'item1':
$("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
break;
case 'item2':
$("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
break;
case 'item3':
$("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
break;
default:
$("#size").html("<option value=''>--select one--</option>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type">
<option value="item0">--Select an Item--</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select id="size">
<option value="">-- select one -- </option>
</select>

as a complementary answer to #Navid_pdp11, which will enable to select the first visible item and work on document load as well.
put the following below your body tag
<script>
$('#mainCat').on('change', function() {
let selected = $(this).val();
$("#expertCat option").each(function(){
let element = $(this) ;
if (element.data("tag") != selected){
element.removeClass('visible');
element.addClass('hidden');
element.hide() ;
}else{
element.removeClass('hidden');
element.addClass('visible');
element.show();
}
});
let expertCat = $('#expertCat');
expertCat.prop('selectedIndex',expertCat.find("option.visible:eq(0)").index());
}).triggerHandler('change');
</script>

Your if statement is setting the value. You want to compare it by doing this
if ($("#type").val() == "item1") {
...
}
daLizard is right though. You want an event handler. document.ready runs only once, when the page DOM is ready to be used.

I don't quote understand what you are trying to achieve, but you need an event listener. Something like:
$('#type').change(function() {
alert('Value changed to ' + $(this).attr('value'));
});
This will give you the value of the selected option tag.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="index">
<select name="in" onchange="myFunction()">
<option>Select One</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select id="select">
<option>Select One</option>
</select>
</form>
</body>
</html>
<script>
function myFunction(){
var x=document.index.in.value;
if(x=="One"){
document.getElementById('select').innerHTML="<option>A</option><option>Two</option>";
}
}
</script>

function showDiv(prefix, chooser) {
var selectedOption = (chooser.options[chooser.selectedIndex].value);
if (selectedOption == "2") {
var div = document.getElementById(prefix + "2");
div.style.display = 'block';
} else {
var div = document.getElementById(prefix + "2");
div.style.display = 'None';
}
}
<div class="form-label-group">
<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control">
<option value="">How can we help you?</option>
<option value="2">Support</option>
<option value="1">Feedback</option>
</select>
<div id="div2" style="display:none;">
<select id="type">
<option value="item0">--Select--</option>
<option value="item1">Technical</option>
<option value="item2">Non-Technical</option>
</select>
</div>
</div>

Fusion Tables - Pan And Zoom 'Data still loading" Error

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);
}

jQuery mobile clone

I am trying to get jQuery-mobile to clone a div like I get it to do on jsfiddle.
head
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="form.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.maskedinput.min.js" type="text/javascript"></script>
<script type="text/javascript" src="json2.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="flashcanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="CreateXMLScript.js"></script>
<script>
$(document).bind('mobileinit', function() {
$.mobile.page.prototype.options.addBackBtn= true;
$.mobile.page.prototype.options.backBtnText="Back";
$.mobile.page.prototype.options.backBtnIcon="arrow-l";
$.mobile.selectmenu.prototype.options.nativeMenu = false;
$.mobile.page.prototype.options.keepNative = ".native";
$.mobile.keepNative=".native";
})
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
HTML
<div id="Template" class="template hide">
<div class="_100">
<div class="_25">
<fieldset>
<label class="label_analysis" for="analysis">Analyte:</label>
<select class="select_analyte" name="analysis" id="analysis">
<option value="">Select</option>
<option value="TN">TN</option>
<option value="TP,NO2+3">TP,NO2+3</option>
<option value="TP,NO2+3,NH3+4">TP,NO2+3,NH3+4</option>
<option value="DO">Dissolved Orthophosphate</option>
<option value="TR">TR Metals, Hardness</option>
<option value="FF">Dissolved Aluminum (FF)</option>
<option value="ULL">TR Metals (ULL Hg)</option>
<option value="TSS">TSS</option>
<option value="TSS/TDS">TSS/TDS</option>
<option value="DM">Dissolved Metals (FF)</option>
<option value="TOC">TOC</option>
<option value="ABF">Anions, Bromide, Fluoride</option>
<option value="CH">Cations, Hardness</option>
</select>
</fieldset>
</div>
<div data-role="controlgroup" class="_13">
<label><input type="checkbox" data-mini="true" name="Filtered" id="Filtered" value="True">0.45u Filtered</label>
<label><input type="checkbox" data-mini="true" name="Dup" id="Dup" value="True">Field Dup</label>
</div>
<div class="_25">
<fieldset>
<label class="label_preserve" for="preserve">Preserved</label>
<select class="select_preserve" name="preserve" id="preserve">
<option value="">Select</option>
<option value="HNO3">HNO₃</option>
<option value="H2SO4">H₂SO₄</option>
<option value="H3PO4">H₃PO₄</option>
<option value="HCL">HCL</option>
<option value="None1">None</option>
</select>
</fieldset>
</div>
<div class="_20">
<fieldset>
<label class="label_cool" for="cool">Cooled</label>
<select class="select_cool" name="cool" id="cool">
<option value="">Select</option>
<option value="Ice">Ice</option>
<option value="Frozen">Frozen</option>
<option value="None">None</option>
</select>
</fieldset>
</div>
<div class="_13">
Remove
</div>
</div>
</div>
<div id="addNew">
ADD ANALYTE
</div>
Script
<script>
$(document).ready(function() {
(function ($) {
var Template = $('#Template');
var count = 0;
var nextId = 0;
Template.find('.removeNew').on('click', function (e) {
e.preventDefault();
$(this).closest('.template').remove();
count--;
});
function cloneTemplate(removable) {
var clone = Template.clone(true, true);
clone.attr('id', clone.attr('id') + nextId);
clone.find('label[for]').each(function( index ) {
var elem = $(this);
elem.attr('for', elem.attr('for') + nextId);
});
clone.find('select, input').each(function( index ) {
var elem = $(this);
elem.attr('id', elem.attr('id') + nextId);
elem.attr('name', elem.attr('name') + nextId);
});
if (!removable) {
clone.find('.removeNew').remove();
}
clone.insertBefore("#addNew").removeClass('hide');
count++;
nextId++;
}
// Create First Analyte and delete the remove button.
cloneTemplate(false);
$('a.showNew').on('click', function (e) {
e.preventDefault();
cloneTemplate(true);
return false;
});
})(jQuery)
});
</script>
I have received tons of help with jQuery but no matter what I do, it just won't work in jQuery-mobile. Either it clones upside down (the 1st item becomes last and all fields are populated) or the new fields on the new div won't let me populate them (the current issue).
I didn't create a Fiddle as everything I have tried works in the fiddle, just not in Mobile.

I checked the source of your pages from the link you provided, im not sure exactly what you are trying to achieve as you have a Complex Form. However, place this amended code i made below just before the </body> tag of your page and remove the other script part you have at the moment. Make sure you do a backup of your JQM APP before just incase you need to Undo these changes i am providing.
I also noticed a few $(document).ready(function() { in your pages, these are not needed so remove them. Just a bare bones click functions are ok. You can consolidate all these under one <script> ///// </script>. Where you place your functions is important, as some need to be in the <head> some in the <body> and some after the </body> or </html> tags
<script>
var Template = $('#Template');
var count = 0;
var nextId = 0;
Template.find('.removeNew').on('click', function (e) {
e.preventDefault();
$(this).closest('.template').remove();
count--;
});
function cloneTemplate(removable) {
var clone = Template.clone(true, true);
clone.attr('id', clone.attr('id') + nextId);
clone.find('label[for]').each(function( index ) {
var elem = $(this);
elem.attr('for', elem.attr('for') + nextId);
});
clone.find('select, input').each(function( index ) {
var elem = $(this);
elem.attr('id', elem.attr('id') + nextId);
elem.attr('name', elem.attr('name') + nextId);
});
if (!removable) {
clone.find('.removeNew').remove();
}
clone.insertBefore("#addNew").removeClass('hide');
count++;
nextId++;
}
// Create First Analyte and delete the remove button.
cloneTemplate(false);
$('a.showNew').on('click', function (e) {
e.preventDefault();
cloneTemplate(true);
return false;
});
</script>

Fusion Table layer dropdown query pan and zoom not working

I am trying to get this google map to pan and zoom to the selected dropdown option. The dropdown query itself is working but I am new to coding and I can't figure out what is wrong with the code to get the map to pan and zoom to the query results. The column heading is "Query" on the google fusion table, so I am getting confused.
Here is an example of what I want the map to do:
http://www.geocodezip.com/geoxml3_test/www_advocacy_ucla_edu_Assembly_MapC.html
and this is where I got sections of the pan/zoom code from:
http://www.geocodezip.com/geoxml3_test/v3_SO_FusionTables_pan2Marker.html
And, here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<!-- <link href="style.css" rel="stylesheet" /> -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var tableId = '15wosKAeHC0gcpU_N6UPbxPL09RrEBKlQNEaCmnU';
var locationColumn = 'Lat';
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng(34.03,-111.9),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: locationColumn,
from: tableId
},
options: {
styleId: 3,
templateId: 3
}
});
layer . setMap ( map );
google.maps.event.addDomListener(document.getElementById('Query'),
'change', function() {
updateMap(layer, tableId, locationColumn);
});
}
// Update the query sent to the Fusion Table Layer based on
// the user selection in the select menu
function updateMap(layer, tableId, locationColumn) {
var query = document.getElementById('Query').value;
if (query) {
layer.setOptions({
query: {
select: locationColumn,
from: tableId,
where: "Query = '" + query + "'"
}
});
panToMarker(Query, tableId, locationColumn);
} else {
layer.setOptions({
query: {
select: locationColumn,
from: tableId
}
});
}
}
function panToMarker(Query, tableId, locationColumn) {
var queryStr = "SELECT "+locationColumn+" FROM "+tableId+" WHERE Query = "+Query+";";
document.getElementById('query').innerHTML = queryStr;
var queryText = encodeURIComponent(queryStr);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
query.send(panTo);
}
function panTo(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 geoXml = new geoXML3.parser();
var kml = FTresponse.getDataTable().getValue(0,0);
geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
geoXml.docs[0].markers[0].setMap(null);
map.setCenter(geoXml.docs[0].markers[0].getPosition());
if (map.getZoom() < 10) map.setZoom(10);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="wrapper">
<table>
<tr>
<td>
<div id="menu" style="background-color:#EFE0B9;height:500px;width:150px;float:left;">
<label><b>Select:</b></label>
<select id="Query">
<option value="Bishop Creek">Bishop Creek</option>
<option value="Blue Spring">Blue Spring</option>
<option value="Blue Wash">Blue Wash</option>
<option value="Bronco Creek">Bronco Creek</option>
<option value="Camp Creek">Camp Creek</option>
<option value="Cave Creek">Cave Creek</option>
<option value="Columbine Spring">Columbine Spring</option>
<option value="Copper Creek">Copper Creek</option>
<option value="Cottonwood Creek">Cottonwood Creek</option>
<option value="Davenport Wash">Davenport Wash</option>
<option value="Deadman Creek">Deadman Creek</option>
<option value="Grapevine Canyon">Grapevine Canyon</option>
<option value="Holmes Canyon">Holmes Canyon</option>
<option value="Horse Creek">Horse Creek</option>
<option value="Jacks Gulch">Jacks Gulch</option>
<option value="Lime Creek upper">Lime Creek upper</option>
<option value="Lime Creek lower">Lime Creek lower</option>
<option value="Mud Spring">Mud Spring</option>
<option value="New River">New River</option>
<option value="Rackensack Canyon">Rackensack Canyon</option>
<option value="Red Creek">Red Creek</option>
<option value="Red Creek Middle">Red Creek Middle</option>
<option value="Round Tree Canyon">Round Tree Canyon</option>
<option value="Seven Springs">Seven Springs</option>
<option value="Silver Creek">Silver Creek</option>
<option value="Sheep Creek">Sheep Creek</option>
<option value="Squaw Creek">Squaw Creek</option>
<option value="Sycamore Creek">Sycamore Creek</option>
<option value="Sycamore Creek HK Ranch">Sycamore Creek HK Ranch</option>
<option value="Tangle Creek">Tangle Creek</option>
<option value="Two Mile Spring">Two Mile Spring</option>
<option value="Verde River">Verde River</option>
<option value="Walnut Spring">Walnut Spring</option>
<option value="Wet Bottom Creek">Wet Bottom Creek</option>
</select>
<br><br><br><br><br><br><br>
</td>
<td>
<div id="googft-mapCanvas" style="width:700px; height:600px;">
</td>
</div>
</body>
</html>
I have no idea what I am doing wrong, I would really appreciate if anyone could point me in the right direction!!
=D

The code is attempting to use a GViz query, but that API is not included. Add:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
The code is attempting to parse KML from the Lat column, but that isn't KML, it is a 2 column location. Remove:
var geoXml = new geoXML3.parser();
var kml = FTresponse.getDataTable().getValue(0,0);
geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
geoXml.docs[0].markers[0].setMap(null);
map.setCenter(geoXml.docs[0].markers[0].getPosition());
if (map.getZoom() < 10) map.setZoom(10);
Replace that with:
var bounds = new google.maps.LatLngBounds();
for (var i=0; i<numRows; i++) {
var lat = FTresponse.getDataTable().getValue(i,0);
var lng = FTresponse.getDataTable().getValue(i,1);
var point = new google.maps.LatLng(lat,lng);
bounds.extend(point);
}
if (numRows == 1) map.setCenter(point);
else map.fitBounds(bounds);
if (map.getZoom() < 10) map.setZoom(10);
Change your GViz query to:
var queryStr = "SELECT Lat,Long FROM "+tableId+" WHERE Query = '"+Query+"';";
working example

google maps Displaying text directions with setPanel() not work

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>

Resources