I have used the Google Maps API to create a simple HTML page which I'm then embedding into an iFrame on another page.
Page works fine when outside of the iFrame however when within the iFrame, the window position doesn't scroll to center on the marker.
An example is here: http://webfe.omega.studiocoast.com.au/epping-club.aspx and click on club location.
On reading this I'm wondering why I'm using a iFrame and instead call the API directly from the parent page...
But any suggestions as to my first problem would be fantastic :)
After much searching I found the issue was related to the iFrame being embedded inside a jQuery accordion. It rendered correctly initially when the accordion was rolled up by however when it was rolled down, the map position was thrown out.
Managed to fix the marker location by creating a new event which fired out when the accordion rolled down which re-rendered the iFrame and map position.
Thats because you are embedding http://webfe.omega.studiocoast.com.au/media/Assets/Maps/EppingMap.html into an iframe that does not fit the whole screen (you are actually cutting the image and only showing the right corner of the map).. I would rather embed the map directly from google as you can copy the map in the exact size you want..
If you want to do it your way I would suggest you take a look at the javascript found when embedding directly from google..
Open this link in firefox and use firebug to analyze it.. then I guess you will find what you need.
http://maps.google.no/maps/empw?url=http:%2F%2Fmaps.google.no%2F%3Fie%3DUTF8%26ll%3D61.143235,9.09668%26spn%3D14.594437,39.506836%26z%3D5%26output%3Dembed&hl=no&gl=no
Related
I'm embedding various content from Issuu on a web page. On page load the embedded content from Issuu is automatically in focus, with visible menus and shadows within the embedded iframe.
This seems to be the standard solution, and there's no way to prevent this with the given embed codes from Issuu. But I would really like to find a way to load the content without it being in focus before the user actually hovers/clicks the embedded area.
As of now the initial focus is only removed if I first click somewhere within the embedded content, and then move my pointer outside of the content.
Is there any way to sort this out with the help of jQuery?
I have tried to solve this by adding the following jQuery code:
$('#issuu_embed').blur();
I also tried to simulate a click on the embedded iFrame, in an attempt to replicate the behaviour mentioned above.
But neither does the trick, and I assume it takes a slightly more sophisticated piece of code to make this work.
Grateful for any hints that could point me in the right direction.
Live CodePen:
https://codepen.io/ehrogn/pen/PoEmJKv
I embedded a JSnes embed page I had made (found here: https://chilibowlflash.netlify.app/example/megaman2.html) to a google site.
However, when I scroll down the whole page goes down with and not just the game inside the iframe. I don't want this. And instead want the game inside the iframe to go down, not the page inside the iframe or the actual google site . Any help? Or can't understand what I'm saying? I'm all ears!
I currently have a page with a few buttons. When I click on the button I want to open a new html page within the parent page. I want to do this in such a way that the parent window becomes transparent and the new page is over it. How can I go about doing this? I have tried to use Iframes but it does not give me the output that I want.
James Kirsch has given you one way to do it. Another is to have a hidden DIV that you show when you need it. In both cases, you may have to place a semi-transparent GIF image behind the DIV (or opened window) so someone can not do anything with the rest of the web page until they have finished interacting with the new window. You can do this by using the z-index CSS command. So the DIV would be:
<DIV style='z-index:100;'>....</DIV>
and the image would be something like
<img src="PUT YOUR PATH HERE" style='position:absolute;top:0%;left:0%;width:100%;height:100%;z-index:50;'>
This would put the GIF image halfway between the web page and the DIV.
The above is what is happening when you go to a website and they grey out everything behind the new window. It also keeps people from pushing on buttons when you don't want them to do so.
IFRAME stands for something like INSERTED_FRAME where the "INSERTED" part means it is inserted into your pre-existing web page. That is why it doesn't work. Neither will the FRAME command work because (again) it is embedded into the pre-existing web page. You are wanting to lay the new window on top of the web page. Thus, Mr. Kirsch' answer and my own. Note that you can also use a TABLE command to do the same thing - even if it is frowned upon to use tables presently. It is the STYLE part of the command that causes the HTML element to appear above the rest of the web page and not any particular HTML command itself. Also, the "position:absolute" part of the STYLE command is what overrides the web page's positioning of the element. Have fun!
In the Javascript have you considered using the following?
window.open();
This call appears to take parameters for Position and Size, you may be able to close the previous window also if you desire, or manipulate it.
Example:
window.open('this.html','','left=15,top=15,width=800,height=600');
Reference: here
I have a google map which has multiple markers pulled from a custom post type.
They also have info windows containing information from each post, but when the page is loading the infowindows/markers appear before the map does.
Is there a way I can set it so that the markers/infowindows only show once the map has fully loaded? Or have a screen which is shown until it's loaded?
I've attached a couple of screen grabs to show what I mean
Any help would be much appreciated, thanks!
Thanks, sorry about that, I solved it by adding css display:none to my marker div, this stopped them from all loading down the page but they all still worked on load
Can anyone give me a example on how to format this. I am not familiar with Jquery and what I have tried does not work. I don't have the rep to add to the thread and ask. Any help would be greatly appreciated. I have a iframe google map in tabs that are not loading correctly very similar to this problem;
From a post Google map position incorrect on load
"The problem is that the place you want the map to center on ends up in the top left corner of the iframe for some reason. I think it's because on google's side the map resize event is firing too early before it knows the full size of the iFrame.
Remove the iframe src tag.
Embed the below javascript code somewhere below the iframe:
jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc....");
Because it loads the map after the iframe is there. If I still have problems in the future I'll try adding a short delay to the above code, making it run after document load."