Hi,
I'm having some difficulty getting a Google map to appear on my application within the jQuery Mobile framework.
The way it's set up is that I have my main landing page (default.aspx). On that, I have a link to a menu page (MapsMenu.aspx), and from there links to a set of maps (MapDisplay.aspx).
If, on the link on the MapsMenu.aspx page, I set data-ajax="false" than the map will load after jumping out of the framework and onto a new browser page. This is not ideal.
If I remove the data-ajax="false" attribute on the link, then the MapDisplay.aspx page loads, but the map loading method is not triggered. The code on the MapDisplay.aspx page is below:
<
script
type
="text/javascript"
src
="http://maps.google.com/maps/api/js?sensor=false"></
script
>
<
script
type
="text/javascript"
src
="http://j.maxmind.com/app/geoip.js"></
script
>
<
script
type
="text/javascript"
src
="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></
script
>
<
link
href
="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
rel
="stylesheet"
type
="text/css"
/>
<
script
src
="MapOperations.js"
type
="text/javascript"></
script
>
<
script
type
="text/javascript">
//Google Maps globals:
var
directionRenderer;
var
directionsService =
new
google.maps.DirectionsService();
var
map;
$(document).ready(
function
() {
alert(
"Test"
);
InitialiseMap();
var
loc = $(
'#hfLoc'
).val();
SetupMap(loc);
});
</
script
>
The jQuery doesn't seem to be firing at all, as the alert("Test") is not being triggered. Am I missing something?
Many thanks for any help!