I'm trying to use Bing Maps 7.0 API with Lazy Loading, as this seem to be supported with the onScriptLoad parameter. I used this minimal test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bing Maps Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id='mapDiv' style="position:absolute; width:600px; height:400px;"></div>
<script type="text/javascript">
function initMap() {
console.log('Callback called');
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:"<API KEY>"});
}
function loadMapControl()
{
var script = document.createElement("script");
script.setAttribute("src", "http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onScriptLoad=initMap");
script.setAttribute("type", "text/javascript");
document.documentElement.firstChild.appendChild(script);
console.log('Tag appened');
}
setTimeout(loadMapControl, 1000);
</script>
</body>
</html>
The callback is called as expected, but Firebug throws me an Microsoft.Maps.Map is not a constructor error. This even if I delay the map creation by 10 seconds after the callback is called via setTimeout.
The simple example in Bing docs, however, is working perfectly:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bing Maps Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
</head>
<body>
<div id='mapDiv' style="position:absolute; width:600px; height:400px;"></div>
<script type="text/javascript">
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:",API KEY>"});
</script>
</body>
</html>
Has anybody succeeded in getting the API 7.0 to work with lazy loading?
Thanks.
FYI, this issue has finally been fixed in the newest release of the Maps API.
Everything is working as expected with this new version.
Related
For some reason the following code (which triggers parent-page functions) will not work in IE11. Its been working fine uptil now but no longer. To note: I have tried to turn off Protected mode (which is not a solution for customers) but this didn't work either!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Register</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script type="text/javascript">
var accounts = window.opener.$('input[name="accounts_added"]');
var text = window.opener.$('#counter_$id');
$(accounts).val(parseInt($(accounts).val()) + 1);
//window.opener.$('input[name="subBtn"]').show();
window.opener.updateAjaxbox();
window.close();
</script>
</body>
I've been scratching at my head with this for a few days now and I cannot find any solution to this online or even with a professor.
I'm working on a system that requires some pages to be capable of dynamically generating new HTML content whilst running (JSF web project running on glassfish4 server)
I've found some resources on how to do this but it only worked when running on a standard HTML page. When I convert it to the XHTML standard the function no longer generates anything (although it is still being called, the alert box confirmed that).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1"></meta>
<title>Insert title here</title>
</head>
<body>
<SCRIPT type="text/javascript">
function addQuestion() {
alert('yay');
var exam = document.getElementById('divarea');
var temp = document.createElementNS('h', 'button');
temp.setAttribute('value', 'child');
exam.appendChild(temp);
}
</SCRIPT>
<div id="divarea">
</div>
<h:commandButton value="create new stuff" onclick="addQuestion()"/>
</body>
</html>
If anyone can shed some light on this issue it'd be greatly appreciated.
P.S.
Here are the resources I've been using to attempt troubleshooting.
Converting javascript to work with XHTML
Creating elements dynamically using javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1"></meta>
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<body>
<SCRIPT type="text/javascript">
function addQuestion() {
var oldcon=$("#divarea").html();
var newcon='<button>child</button>';
var updcon=oldcon+newcon
console.log(newcon);
$("#divarea").html(updcon);
}
</SCRIPT>
<div id="divarea">
</div>
<button onclick="addQuestion()"/>dff</button>
</body>
</html>
The following code works only in Chrome. I need it to run on all major browsers. Firefox and IE load the image once. Opera doesn't load it at all.
The screen.jpg file is sent with Cache-Control: no-cache, no-store. I cannot use a library like jQuery because they're too big.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function refresh()
{
document.getElementById("screen").src = "screen.jpg";
setTimeout("refresh()", 500);
}
</script>
</head>
<body style="margin:0" onload="refresh()">
<img id="screen" style="width:100%"/>
</body>
</html>
you can append random number to the end of source so that the image is re-requested every time:
document.getElementById("screen").src = "screen.jpg?" + Math.random()*999999;
Could anyone please tell me what's wrong with:
Execute function
In Chrome inspector the error I get is:
Uncaught SyntaxError: Unexpected token <
Below is how my code looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="root"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
Execute function
<script>
function myFunc() {
// some code here
}
</script>
</body>
</html>
Execute function
<script>
function myFunc() {
// some code here
}
</script>
Put the anchor tag out of script tag, you are putting tags inside javascript so that is why error is result.
I am putting a google map on my web site and I wanted to add points to the map but I am not sure how to do it. I have tried a few different things but they did not work. Here is what I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=myKeyHere"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.8163, -98.55762), 4);
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 750px; height: 500px"></div>
</body>
</html>
This page should get you going
The Google Maps API shows information on how to do this. Basically do:
var point = new GLatLng(latitude,longitude);
map.addOverlay(new GMarker(point));
I used this plugin (it uses Google Map V3 as V2 is deprecated)
http://blog.bobcravens.com/2010/06/06/AGoogleMapsVersion3JQueryPlugin.aspx
it also requires jquery(which makes things easier). It has methods such as
map.addMarkerByLatLng
or
map.addMarkerByAddress
Hope that helps!