Search jQuery

jQuery Forum

Map isn't showing with JQuery Mobile

in Getting Started • 9 years ago

I'm building an app with JQuery Mobile that will be submitted to Phone Gap. Right now everything works but the map doesn't show up. You can see the working example here: http://phoenix.sheridanc.on.ca/~bdes1612/DS_P2/swipe_test8.html

Swipe the lefthand side and click dinning. The selectors are there but no map. and it works outside of query mobile: http://phoenix.sheridanc.on.ca/~bdes1612/DS_P2/plgeotestcolour2.html

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.

Here is the code:

<!DOCTYPE html>

<html>

<head>

<title>Open panel on swipe - jQuery Mobile Demos</title>

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

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>

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

<dl>

<dt>Swipe <span>verb</span></dt>

<dd><b>1.</b> to strike or move with a sweeping motion</dd>

</dl>

</div>

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

<p>Right push panel.</p>

<ul>

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

</div>

<h1>Header</h1>

</div>

<div id="left_controls"> See

<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="bakery">Bakery</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="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="casino">Casino</option>

<option value="cemetery">Cemetery</option>

<option value="church">Church</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="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="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="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="school">School</option>

<option value="shoe_store">Shoe Store</option>

<option value="shopping_mall">Shopping Mall</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>

</select>

near

meters from your location.

</div>

</div>

</body>

</html>

Response title

Attachments

jQuery Forum

Map isn't showing with JQuery Mobile

Statistics

Tags

Actions