I'm having problem setting marker position and map center, with "Invalid value for property " error or "invalid value for property " error such as:
Error: Invalid value for property : (13.7323691218542,
100.64347976627096) Source File:
http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/5/main.js Line: 26
This is based on tests on Firefox and Chrome
My top HTML contains:
Javascript function "move_it()"
An iframe (id: "mapIframe") sourced by a cgi (nwfMap.cgi)
And the "mapIframe" iframe cgi contains:
A var mapNwf for a map
A var markerMe for a marker
An iframe (id: "myInfoIframe") sourced by a cgi (nwfSetInfo.cgi)
And the "myInfoIframe" iframe cgi contains:
A call to the function "move_it()" defined in top HTML
This call is intended to move the marker (markerMe) to a specific location
and also to set the map (mapNwf) center to the same specific location
The invocation of the "move_it" was executed OK until when it tried to do:
mrk.setPosition(pos); or
mp.setCenter(pos);
It's here I've encountered the "Invalid value for property ..." errors.
The immediately preceding execution were of:
alert('mp = [' + mp.getCenter() + ']'); and
alert('mrk = [' + mrk.getPosition() + ']');
were OK with correct location (lat/lng) value displayed (map center and marker position)
So the question is, how come getCenter and getPosition worked for same map and marker variables, but the setCenter and setPosition had failed?
If getCenter and getPosition came back with correct data, it indicates that there's no variable context issues, right?
But then how come I can only "read" but not "set" the values via these variables?
Would it be related to the appearance of the google line:
in the top HTML, and in its iframe, and in the iframe's iframe?
Repetition and the nested level causing some google map context issue leading to my problem?
Much thanks in advance for any advice! Followings are relevant code portions for your examination and investigation:
Relevant portions of the top HTML
<html>
........
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script language="JavaScript">
function move_it(slat, slng) {
var ifrm = document.getElementById('mapIframe');
var mp = ifrm.contentWindow.mapNwf;
var mrk = ifrm.contentWindow.markerMe;
var pos = new google.maps.LatLng(slat,slng);
alert('mp = [' + mp.getCenter() + ']');
alert('mrk = [' + mrk.getPosition() + ']');
alert('pos = [' + pos + ']');
mrk.setPosition(pos);
mp.setCenter(pos);
}
</script>
.........
<div id="nwfMap">
<iframe width=100% height=520 frameBorder=0 src="nwfMap.cgi" name="mapIframe" id="mapIframe" scrolling=no></iframe>
</div>
........
</html>
Relevant portions of the "mapIframe" iframe (produced by nwfMap.cgi)
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var mapNwf = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var latLngPre = new google.maps.LatLng(0.0, 0.0);
var markerMe = new google.maps.Marker({
position: latLngPre,
title: 'Me Here',
map: mapNwf,
draggable: true,
animation: google.maps.Animation.DROP
});
.........
</script>
.........
<div id="myInfoForm" style="display: none;">
<iframe border=1 width=100% height=200 align=center marginwidth=0 marginheight=0 seamless=seamless frameBorder=0 src="nwfSetInfo.cgi" name="myInfoIframe" id="myInfoIframe" scrolling=no></iframe>
</div>
.........
Relevant portions of the "myInfoIframe" iframe (produced by nwfSetInfo.cgi)
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
parent.parent.move_it(13.7323691218542, 100.643479766271);
</script>
The problem is fixed now, by moving the "move_it()" function definition down from the top level HTML to the mid-level iframe "mapIframe" and by changing the "move_it()" invocation in the "myInfoIframe" iframe from
parent.parent.move_it(13.7323691218542, 100.643479766271);
to
parent.move_it(13.7323691218542, 100.643479766271);
Don't know why, but obviously by the reducing of invocation context level something got corrected on the original "can read but not write on map variable" problem. If any one has a good explanation, would like to hear about it. Thanks.
Related
This is probably a performance issue, but I'm wondering how I'd go about proving that.
I set up an Image Resizer website and it works fine if I'm clicking on links to images, but if I use the following code to display a bunch of pictures on a website, the images do not show.
I'm wondering if it's because ImageResizer is being called so many times so quickly (only 15x) and it's getting tripped up somehow. I know enough to implement this and be dangerous, but not enough to understand what the hangup is here. It's possible that Dynamics CRM 2013 (what this code is being run as part of) has some code timeout or something that just skips showing the images if they take too long to load... not sure on that end.
Any and all help would be appreciated! Thanks everyone!
<html>
<head>
<title>Image View</title>
<script language="javascript" type="text/javascript">
function getImages() {
var unitSerial = window.parent.Xrm.Page.getAttribute("new_serial").getValue();
var guid = window.parent.Xrm.Page.data.entity.getId();
guid = guid.substring(1, guid.length-1);
var imageHTML = "<table><tr>";
for (var i=1; i<16; i++) {
imageURL = "http://website/Images/" + guid + "-" + unitSerial + "-" + i + ".png";
imageHTML = imageHTML + "<td><a href='"+imageURL+"' target=_blank><img height=95px border=0px width=130px source='"+imageURL+"?maxwidth=130&maxheight=95' /><br /><center>Pic " + i +"</center></a></td>";
}
imageHTML = imageHTML + "</tr></table>";
document.getElementById("images").innerHTML = imageHTML;
}
</script>
</head>
<body>
<div id="images"></div><script language="javascript" type="text/javascript">getImages();</script>
</body></html>
I just noticed the attribute I have written is "source" in the img tag but it needs to be "src". Whaaaaat a dummy. changed that and it works, of course.
We have implemented google +1 buttons on our site and they have served reliably for some time. However we recently noticed that the buttons are not serving reliably. We rarely see them appear in their designated spaces.
For example on this page: Sample Page : you'll see a gray box of social buttons to left of the page. In it, there is SUPPOSED to be a Google +1 button.
We've requested the button with this code:
<div id="social-google" class="social">
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone size="medium"></g:plusone>
</div>
We've also tried this code:
<div id="social-google" class="social">
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-size="small" data-annotation="bubble"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
Occasionally we'll see a Google +1 button render but, more often than not, the space reserved for the button is apparently blank. When you examine things with firebug, you see that Google HAS attempted to render a button, but for some reason it has placed the button far above and left of the page boundaries.
Here is the top of the html Google generates for the button:
<div id="___plusone_0" style="position: absolute; width: 450px; left: -10000px;">
<iframe id="I0_1377554650466" width="100%" scrolling="no" frameborder="0" hspace="0 marginheight="0" marginwidth="0" style="position:absolute;top:-10000px;width:450px;margin:0px;border-style:none" tabindex="0" vspace="0" name="I0_1377554650466" src="https://apis.google.com/_/+1/fastbutton?bsv=o&usegapi=1&size=medium&hl=en-US&origin=http%3A%2F%2Fwww.comicbookresources.com&url=http%3A%2F%2Fwww.comicbookresources.com%2F%3Fpage%3Darticle%26id%3D47537&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps- ...
As you can see Google gave its generated ___plusone_0 div a left position of -10000px and gave the inner iFrame a top position of -10000px. So the button is there. It's just floating out in space. If I manipulate theses position settings (to 0px) the button becomes visible in its appropriate spot.
Any idea why this would happen? Any idea how we can fix this?
You can try adding the following CSS declaration to your stylesheet:
#___plusone_0, #___plusone_0 iframe {
position:static !important;
}
This is a hackaround, so don't depend on it in long term.
Based on an old thread in Drupal Issues.
During the last few days I'm suffering from this problem too. I have a page building app. One of the widgets is google plus: users can enter a url, and the app generates a button. (So there can be more, than 1 button on the page.) Then user saves the page and can see it on Facebook.
Recommendations and observations...
Double check the protocol of google api script. For example, if your website is on https and you are trying to load http://apis.google.com/js/plusone.js, your buttons will probably fail to render.
When I tested this issue on my server, I occasionally opened the app in 2 browser tabs at the same time. Google buttons didn't appear in the first tab, but they did in the second one!
My app requires user to be authorized on Facebook. When I opened the app without authorization, the buttons were shown as expected. But when I logged in and refreshed the page - buttons disappeared.
When I opened the page on Facebook, buttons didn't appear, regardless of whether I was logged in or not.
I beg your pardon, if you think these notices have no sense, but they may save someone's time in future.
Workaround
Suppose, you're parsing the following code:
<!-- google button will be added into this div -->
<div class="googlePlus" data-href="http://google.com"></div>
jQuery function, which parse all .googlePlus divs.
$('.googlePlus').each(function () {
var $googleDiv = $(this);
// check, if button is already parsed
if (!$googleDiv.children().length) {
// add temporary id to the parent div
var $id = 'googlePlus-' + new Date().getTime();
$div.attr({
'id': $id
});
// create, add and render btn (IE compatible method)
var gPlusOne = document.createElement('g:plusone');
gPlusOne.setAttribute('href', $googleDiv.attr('data-href'));
document.getElementById($id).appendChild(gPlusOne);
gapi.plusone.go($id);
// function, correcting css styles
if (!$.isFunction($.fn.fixGooglePlus)) {
$.fn.fixGooglePlus = function () {
$(this).children('div').children('iframe').addBack().css({
position: 'static',
width: 106,
height: 24
});
}
}
// run function, until css is fixed
var $timer = setInterval(function () {
$googleDiv.fixGooglePlus();
if ($googleDiv.find('iframe').css('position') == 'static') {
clearInterval($timer);
$googleDiv.removeAttr('id');
}
}, 100);
} // button hasn't been parsed
});
Put the button code in a a new HTML file and put that file in an iframe. Compared to #U-D13's answer, it's less susceptible to changes by Google.
In essence I have the same problem as described in this question, but the accepted answer there is not fully working for me.
I want to have the id of the record I'm processing in an HTML5 compliant data-myid attribute, then when the text in the text area is changed, I want call a function that will send an ajax request containing the new value and data-myid to the server. This is important because there can be multiple inlineEditBoxesi a single page. The ajax request part I'm fine with, is getting the proper values to send where I'm stuck.
So far, I know the end result of the HTML declaration will look something like this:
<span data-dojo-type="dijit.InlineEditBox" data-dojo-props="editor:'dijit.form.Textarea'" data-myid="123" title="some title" id="test" >
<script type="dojo/connect" event="onChange" data-dojo-args="myid,value">
console.log(myid + " changed to value " + value);
</script>1339598</span>
But I have not been able to get this to work.
You can get the myId value through
this.domNode.dataset.myid;
... in your onChange event.
Example here : http://jsfiddle.net/psoares/ycEN7/
A more portable solution is to use dojo/dom-attr instead though, like this :
*HTML
<div id="editBox" data-dojo-type="dijit/InlineEditBox"
data-dojo-props="editor:'dijit/form/Textarea'"
data-myid="123"
title="some title">1339598</div>
<div id="output"><div>`
*Javascript :
require(["dojo/dom",
"dojo/dom-attr",
"dojo/parser",
"dojo/html",
"dijit/registry",
"dijit/InlineEditBox",
"dijit/form/Textarea",
"dojo/domReady!"],
function(dom, domAttr, parser, html, registry){
var editBox;
parser.parse().then(function(instances){
editBox = registry.byId("editBox");
editBox.on("change", function(value){
var myId = domAttr.get(this.domNode, "data-myid");
html.set(dom.byId("output"), "Editor " + myId + "'s value changed to " + value);
});
});
});
Using Chrome (22.0....), sometimes, when I try to take :
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
it fails. I mean, if I check the Network console, it says "Pending...", and my .load() events are stuck.
Why? And how can I fix it?
Also tried with :
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
but it is the same...
I don't see the HTML container for the +1 button defined anywhere in the source of the page that you linked. I see the first script that you referenced on the page, but your page appears to be missing:
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
The second snippet of script is intended for asynchronous loading (preferred) that you reference also would require you to insert the same type HTML container.
You can generate the code to include in your page using the +1 button configuration tool.
[UPDATE]
The g-plusone element apparently is being injected dynamically by jQuery, which has a different onload timing than the +1 button's own onload handler, which explains why sometimes it might display. In this case, you need to use the parseTags: explicit option:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{parsetags: 'explicit'}
</script>
And then after your own JavaScript injects the g-plusone div, you must call:
gapi.plusone.go();
Which will explicitly render all +1 buttons on the page when initiated.
For example, I am trying to iframe the youtube subscription box on the homepage, and the problem is, if I make the iframe really long, then it wastes space, but if I make the size I want, then if the user clicks the "load more videos" button, then it gets cut off. So is there any way to make the iframe (or any alternatives) be a percentage of the size, or dynamically change when the page changes?
Create a file and call it iframe.html
<html>
<head>
<script type="text/javascript"></span>
function autoIframe(frameId){
try{
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
if (innerDoc == null){
// Google Chrome
frame.height = document.all[frameId].clientHeight + document.all[frameId].offsetHeight + document.all[frameId].offsetTop;
}
else{
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 18;
}
}
catch(err){
alert('Err: ' + err.message);
window.status = err.message;
}
}
</script>
</head>
<body>
<iframe id="tree" name="tree" src="tree.html" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('tree');}"></iframe>
</body>
</html>
Now create an html page called tree.html and put some dummy content in it.Make sure that the iframe.html and the tree.html are in the same directory. Open the .html files in browser and you will observe the o/p.
Some more useful links :
How to detect iframe resize?
How to detect iframe iframe resize