I'm really new at this and part of my problem is I'm not sure where to put certain code snippets (i.e.: where to put or implement certain scripts , etc..). Any help is much appreciated! Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Open panel on swipe - jQuery Mobile Demos</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="css/jqm-demos.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.1/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.1/jquery.mobile.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<style>
/* Swipe works with mouse as well but often causes text selection. */
#demo-page * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
/* Content styling. */
dl { font-family: "Times New Roman", Times, serif; padding: 1em; }
dt { font-size: 2em; font-weight: bold; }
dt span { font-size: .5em; color: #777; margin-left: .5em; }
dd { font-size: 1.25em;
margin: 1em 0 0; padding-bottom: 1em; border-bottom: 1px solid #eee; }
.back-btn { float: right; margin: 0 2em 1em 0; }
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px;
font-size:.80em;
}
input[type='text'] {
border:1px solid #c3c3c3;
}
label {
float:left;
width:10px;
}
#map_canvas {
height: 40%;
width:40%;
}
#options {
height:10%;
width:10%;
}
#left_controls {
float:left;
width:40%;
margin-left:1px;
}
#right_controls {
float:right;
margin-right:10px;
}
#info {
clear:both;
margin-left:10px;
}
.column {
float:left;
width:220px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var markers=[];
var map;
var marker;
function showPlaces(map,latLng,type,range){
var extra='&range='+range;
map.setCenter(latLng);
if(arguments.length==4) extra+='&ip='+arguments[4];
var req = new XMLHttpRequest();
var lat=latLng.lat();
var lng=latLng.lng();
req.open('GET', 'http://d7.greenpc.in/places/gp.php?type='+type+'&lat='+lat+'&lng='+lng+extra, false);
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
if(req.status == 200)
setMarkers(map,req.responseText);
else
alert("Error loading page\n");
}
};
req.send(null);
}
function clearMarkers(){
for(var i=0;i<markers.length;i++){
markers[i].setVisible(false);
}
markers.length=0;
}
function setMarkers(map,gpResonse){
var res=JSON.parse(gpResonse);
document.getElementById('id_ip').value=res.server.ip;
clearMarkers();
var latlng = new google.maps.LatLng(res.server.lat, res.server.lng);
map.setCenter(latlng);
marker.setPosition(latlng);
document.getElementById('id_lng').value=res.server.lng;
document.getElementById('id_lat').value=res.server.lat;
if(res.server.country.length > 1){
document.getElementById('id_country').innerHTML=res.server.country;
document.getElementById('id_city').innerHTML=res.server.city;
document.getElementById('id_region').innerHTML=res.server.region;
}
for (var i=0;i<res.places.results.length;i++){
markers.push(
new google.maps.Marker({
position:new google.maps.LatLng(res.places.results[i].geometry.location.lat, res.places.results[i].geometry.location.lng),
title: res.places.results[i].name,
map:map,
animation: google.maps.Animation.DROP
})
);
}
}
function initialize() {
// Create an array of styles.
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var latlng = new google.maps.LatLng(43.6667, -79.4167);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
marker = new google.maps.Marker({
position: latlng,
title:"You are here",
map:map,
animation: google.maps.Animation.DROP,
draggable:true,
icon:'http://labs.google.com/ridefinder/images/mm_20_orange.png'
});
var s=document.getElementById('id_type');
var p=document.getElementById('id_ip');
var r=document.getElementById('id_range');
showPlaces(map,latlng,s.options[s.selectedIndex].value,r.value,p.value)
google.maps.event.addListener(marker, 'dragend', function(e) {
var s=document.getElementById('id_type');
var r=document.getElementById('id_range');
showPlaces(this.getMap(),e.latLng,s.options[s.selectedIndex].value,r.value);
});
s.onchange=function(){
var p=document.getElementById('id_ip');
var r=document.getElementById('id_range');
showPlaces(map,marker.getPosition(),this.options[this.selectedIndex].value,r.value)
};
p.onchange=function(){
var s=document.getElementById('id_type');
var r=document.getElementById('id_range');
showPlaces(map,marker.getPosition(),s.options[s.selectedIndex].value,r.value,this.value)
}
document.getElementById('id_lat').onchange=function(){
var s=document.getElementById('id_type');
var r=document.getElementById('id_range');
var lng=document.getElementById('id_lng');
var latlng = new google.maps.LatLng(this.value, lng.value);
showPlaces(map,latlng,s.options[s.selectedIndex].value,r.value)
}
document.getElementById('id_lng').onchange=function(){
var s=document.getElementById('id_type');
var r=document.getElementById('id_range');
var lat=document.getElementById('id_lng');
var latlng = new google.maps.LatLng(lat.value, this.value);
showPlaces(map,latlng,s.options[s.selectedIndex].value,r.value)
}
document.getElementById('id_range').onchange=function(){
var s=document.getElementById('id_type');
showPlaces(map,marker.getPosition(),s.options[s.selectedIndex].value,this.value)
}
navigator.geolocation.getCurrentPosition(centerMap);
}
function centerMap(position){
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var s=document.getElementById('id_type');
var r=document.getElementById('id_range');
showPlaces(map,latlng,s.options[s.selectedIndex].value,r.value)
}
</script>
</head>
<body>
<div data-role="page" id="demo-page">
<div data-role="header" data-theme="b">
<h1>Swipe left or right</h1>
<a href="#left-panel" data-icon="carat-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open left panel</a>
<a href="#right-panel" data-icon="carat-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open right panel</a>
</div><!-- /header -->
<div role="main" class="ui-content">
<dt>Swipe <span>verb</span></dt>
<dd><b>1.</b> to strike or move with a sweeping motion</dd>
</dl>
</div><!-- /content -->
<div data-role="panel" id="left-panel" data-theme="b">
<p>Left reveal panel.</p>
<ul>
<li class="dinning"><a href="#play" title="Home">Dinning</a></li>
<li class="cafe"><a href="#" title="Profile">Cafes</a></li>
<li class="stadium"><a href="#" title="Setting">Stadiums</a></li>
<li class="hotel"><a href="#" title="Logout">Accomodations</a></li>
</ul>
</div><!-- /panel -->
<div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="b">
<ul>
<li class="food"><a href="#" title="food">Food</a></li>
<li class="shopping_mall"><a href="#" title="shopping_mall">Shopping</a></li>
<li class="casino"><a href="#" title="casino">Nightlife</a></li>
<li class="museum"><a href="#" title="museum">Tourist Attractions</a></li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
<div data-role="page" id="play" >
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content" onload="initialize()">
<div id="options">
<div id="left_controls"> See
<select id="id_type" name="type">
<option value="accounting">Accounting</option>
<option value="airport">Airport</option>
<option value="amusement_park">Amusement Park</option>
<option value="aquarium">Aquarium</option>
<option value="art_gallery">Art Gallery</option>
<option value="atm">Atm</option>
<option value="bakery">Bakery</option>
<option value="bank">Bank</option>
<option value="bar">Bar</option>
<option value="beauty_salon">Beauty Salon</option>
<option value="bicycle_store">Bicycle Store</option>
<option value="book_store">Book Store</option>
<option value="bowling_alley">Bowling Alley</option>
<option value="bus_station">Bus Station</option>
<option value="cafe">Cafe</option>
<option value="campground">Campground</option>
<option value="car_dealer">Car Dealer</option>
<option value="car_rental">Car Rental</option>
<option value="car_repair">Car Repair</option>
<option value="car_wash">Car Wash</option>
<option value="casino">Casino</option>
<option value="cemetery">Cemetery</option>
<option value="church">Church</option>
<option value="city_hall">City Hall</option>
<option value="clothing_store">Clothing Store</option>
<option value="convenience_store">Convenience Store</option>
<option value="courthouse">Courthouse</option>
<option value="dentist">Dentist</option>
<option value="department_store">Department Store</option>
<option value="doctor">Doctor</option>
<option value="electrician">Electrician</option>
<option value="electronics_store">Electronics Store</option>
<option value="embassy">Embassy</option>
<option value="establishment">Establishment</option>
<option value="finance">Finance</option>
<option value="fire_station">Fire Station</option>
<option value="florist">Florist</option>
<option value="food">Food</option>
<option value="funeral_home">Funeral Home</option>
<option value="furniture_store">Furniture Store</option>
<option value="gas_station">Gas Station</option>
<option value="general_contractor">General Contractor</option>
<option value="geocode">Geocode</option>
<option value="grocery_or_supermarket">Grocery Or Supermarket</option>
<option value="gym">Gym</option>
<option value="hair_care">Hair Care</option>
<option value="hardware_store">Hardware Store</option>
<option value="health">Health</option>
<option value="hindu_temple">Hindu Temple</option>
<option value="home_goods_store">Home Goods Store</option>
<option value="hospital">Hospital</option>
<option value="insurance_agency">Insurance Agency</option>
<option value="jewelry_store">Jewelry Store</option>
<option value="laundry">Laundry</option>
<option value="lawyer">Lawyer</option>
<option value="library">Library</option>
<option value="liquor_store">Liquor Store</option>
<option value="local_government_office">Local Government Office</option>
<option value="locksmith">Locksmith</option>
<option value="lodging">Lodging</option>
<option value="meal_delivery">Meal Delivery</option>
<option value="meal_takeaway">Meal Takeaway</option>
<option value="mosque">Mosque</option>
<option value="movie_rental">Movie Rental</option>
<option value="movie_theater">Movie Theater</option>
<option value="moving_company">Moving Company</option>
<option value="museum">Museum</option>
<option value="night_club">Night Club</option>
<option value="painter">Painter</option>
<option value="park">Park</option>
<option value="parking">Parking</option>
<option value="pet_store">Pet Store</option>
<option value="pharmacy">Pharmacy</option>
<option value="physiotherapist">Physiotherapist</option>
<option value="place_of_worship">Place Of Worship</option>
<option value="plumber">Plumber</option>
<option value="police">Police</option>
<option value="post_office">Post Office</option>
<option value="real_estate_agency">Real Estate Agency</option>
<option value="restaurant" selected="selected">Restaurant</option>
<option value="roofing_contractor">Roofing Contractor</option>
<option value="rv_park">Rv Park</option>
<option value="school">School</option>
<option value="shoe_store">Shoe Store</option>
<option value="shopping_mall">Shopping Mall</option>
<option value="spa">Spa</option>
<option value="stadium">Stadium</option>
<option value="storage">Storage</option>
<option value="store">Store</option>
<option value="subway_station">Subway Station</option>
<option value="synagogue">Synagogue</option>
<option value="taxi_stand">Taxi Stand</option>
<option value="train_station">Train Station</option>
<option value="travel_agency">Travel Agency</option>
<option value="university">University</option>
<option value="veterinary_care">Veterinary Care</option>
<option value="zoo">Zoo</option>
</select>
near
<input id="id_range" name="range" type="text" size="12" value="500">
meters from your location.
</div>
<div id="map_canvas"></div>
</div>
</div>
</div>
</body>
</html>