Search jQuery

jQuery Forum

Screen name:
nikant25

nikant25's Profile

2 Posts

0 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

common code for map
[0Replies]
- 19-Jan-2013 11:13 AM
- Forum: jQuery Mobile
For my map for mobile application I want to have the following functions:
1. map a static object designated marker;
2. the user has a button when clicked on can determine its current geolocation;
3. also have a button for the user get direktions.
I found some code for all combinations of these positions but they do not work. Is there a common code?

Get Directions in jQuery Mobile
[0Replies]
- 13-Jan-2013 01:12 PM
- Forum: jQuery Mobile
I put your Get Directions http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map
to your mobile site. In the source code I put in my required geolocation:
var mapCenter = new google.maps.LatLng(59.324419,18.101271);
Then I tried to insert a marker of Google with this code:
https://developers.google.com/maps/documentation/javascript/overlays#MarkerAnimations
My general code:
<!DOCTYPE html>
<html>
<head>
<title>Get Directions</title>
<meta content="en" http-equiv="content-language">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.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).live("pageshow", "#map_page", function() {
initialize();
});

$(document).live("pagecreate", "#map_page", function() {
$('#submit').click(function() {
calculateRoute();
return false;
});
});

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var mapCenter = new google.maps.LatLng(59.324419,18.101271);

var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
}

marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: parliament
});

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));
}

function calculateRoute()
{
var selectedMode = $("#mode").val();
var start = $("#from").val();
var 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" data-theme="d">
<h1>Maps directions</h1>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:300px;"></div>
<div data-role="fieldcontain">
<label for="from">From</label>
<input type="text" id="from" value=""/>
</div>
<div data-role="fieldcontain">
<label for="to">To</label>
<input type="text" id="to" value=""/>
</div>
<div data-role="fieldcontain">
<label for="mode" class="select">Transportation method:</label>
<select name="select-choice-0" id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
</select>
</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>

And after this card on Get Directions gone. Why does not the token in this code. How is it possible to show how geo-location marker I want?

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend