I'm very new at using jquerymobile and Google maps. I was going to start out simple with the examples online. I have a jquery mobile site that has other functionality on it but I need to load a google map. I decided the best way was to have the map open from a seperate page after a user clicked a jquery button. So far, so good.
Ok, since my last post about this I have made some progress but I have some real issues happening and I don't know what's causing it. Here are my issues. http://jsfiddle.net/Nemesiss/J82UJ/
- When loading the page into a mobile device, it renders like a desktop version.
- The return button when clicked doesn't go to the URL that is coded, it zooms into a weird area on the already loaded map.
Things I would like to see:
- change the code so a user can use their current location or enter a start destination
- have the start and end destination fields so that if they enter an address they don't need to enter the city. The city location is the default and I don't want them to search on other city's or locations.
Below is the code I have:
<!DOCTYPE html>
<html>
<head>
<title>jQuery mobile with Google maps geo directions example</title>
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="jQuerythemes/jquery.mobile.theme-1.4.0.min.css" />
<link rel="stylesheet" href="jQuerythemes/jquery.mobile.structure-1.4.0.min.css" />
<link rel="stylesheet" href="jQuerythemes/jquery.mobile.icons-1.4.0.min.css" />
<script src="jQuerythemes/jquery-1.10.2.min.js"></script>
<script src="jQuerythemes/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
$(document).on("pageinit", "#map_page", function () {
initialize();
});
$(document).on('click', '#submit', function (e) {
e.preventDefault();
calculateRoute();
});
var directionDisplay,
directionsService = new google.maps.DirectionsService(),
map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapCenter = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
mapTypeControl: false,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));
}
function calculateRoute() {
var selectedMode = $("#mode").val(),
start = $("#from").val(),
end = $("#to").val();
if (start == '' || end == '') {
// cannot calculate route
$("#results").hide();
return;
}
else {
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode[selectedMode]
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
$("#results").show();
/*
var myRoute = response.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
alert(myRoute.steps[i].instructions);
}
*/
}
else {
$("#results").hide();
}
});
}
}
</script>
</head>
<body>
<div data-role="page" id="map_page">
<div data-role="header">
<h1><a href="#"></a>Google Directions Map</h1>
<a href="http://goto this site onclick/" data-role="button" id="submit">Return</a>
</div>
<div data-role="content">
<div >
<div id="map_canvas" style="width: 100%; height: 300px"></div>
<div data-role="fieldcontain">
<label for="mode" class="select">Transportation method:</label>
<select name="select-choice-0" id="mode">
<option value="TRANSIT">Public Transit</option>
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="from">From</label>
<input type="text" id="from" value="My City" />
</div>
<div data-role="fieldcontain">
<label for="to">To</label>
<input type="text" id="to" value="My City" />
</div>
<a data-icon="search" data-role="button" href="#" id="submit">Get directions</a>
</div>
<div id="results" style="display:none;">
<div id="directions"></div>
</div>
</div>
</div>
</body>
</html>
Thanks!
