I have been stuck on this problem for a while.
This is my first page
- <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<jsp:include page="include.jsp"/>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li><a href="#" rel="external" data-ajax="false" onclick="$.mobile.changePage('test.jsp')">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
And my second page
- <div id="test" data-role="page">
- //Public Maps
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> - //Private Maps
- //<script type="text/javascript" src="http://maps.google.com/maps/api/?key=12345"></script>
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<a href="#" onclick="initialize();">asd</a>
<div id="map_canvas" style="width:200px; height:200px"></div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
What I want to do is quite simple. I need to load different version of the google API depending on the project Im in.
Problem is, I cannot even make it work for only one public API, when I land on my second page the browser sends me to a blank page when it deals with the script tag.
Eventually I would want to load multiple google API type (public, private, enterprise..).
What I dont want to do is load all different google API, only one at a time. Also, #home has its own .jsp file, same as #test so the script in #test isnt loaded at first (thats exactly what I want to do)
How can I achieve this?