embeded custom google map wont display without refresh - javascript

I built 2 custom google maps for a site and have embeded them with iframes on a mobile site: mobile.moodyplumbingmpi.com The maps do not display the custom map but a map of the Southern Hemisphere when first viewed by taping service areas. If I hit refresh, the correct maps display. Wondering if I am missing some sort of jquery command to display on opening or something like that. I am completely stuck on this. Any help would be greatly appreciated! Mike
Here is the code for the section that displays the maps:
BackMoody Plumbing
<article data-role="content">
<h2>Moody Plumbing Service Area</h2>
<ul data-role="listview" data-inset="true" data-filter="false">
<li>
<h3>Warren Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ"></iframe><br /><small>View Larger Map</small>
</li>
<li>
<h3>Youngstown Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU"></iframe><br /><small>View Larger Map</small>
</li>
</ul>
</article>
<nav data-role="footer">© <script>new Date().getFullYear()>2010&&document.write(+new Date().getFullYear());</script> Moody Plumbing Visit Full Site
</nav>

So your issue is that the iFrames containing the maps are being built while they are hidden. This confuses the Google MapsEngine API which expects the viewport window to be properly sized and visible. When you toggle the iFrame's visibility from the "Service Areas" button, the MapsEngine just plunks down at zoom 1 at lat/lng 0,0.
I think one solution is to dynamically re-set the SRC of the iFrames when the "Service Areas" button is pressed. Change the two iFrame tags to include a unique id:
<iframe id="location1" width="250" height="250" ...
<iframe id="location2" width="250" height="250" ...
Then add a simple script into the HEAD of the HTML document; I didn't think of this, it came from: Reload an iframe with jQuery
<script type="text/javascript">
$(document).on("pageshow", "#locations", function(event, data) {
$('#location1').attr('src', function(i, val) { return val; });
$('#location2').attr('src', function(i, val) { return val; });
});
</script>
The reload is a bit jumpy. So other possible options to consider include:
dynamically trigger a refresh of the iFrames when the "Service Areas" button is pressed; there is code online for this but it does not appear to work in all types of browsers.
Put a couple of DIVs in as placeholders, then use javascript to insert the iFrame HTML as innerHTML of the DIVs.
Find a way to trigger a map RESIZE event [google.maps.event.trigger(???, "resize");] similar to one of the answers in the following link; I don't know if this is possible using the MapsEngine: google maps not displayed correctly unless refreshing
You do need to make sure about the timing of events. The #locations SECTION needs to be completely visible before attempting any of the above to allow the MapsEngine initialization to work properly. You will need to set an event to know when the SECTION has become visible before poking at the iFrames (the jQuery pageshow event does this as provided in the code sample above).
Finally, I'm not sure if you built the maps using Google's MyMaps or using Google MapsEngine. If you indeed used MapsEngine, you need to be aware that Google is terminating the MapsEngine at the end of 2015, and these two maps will become non-operable.

Related

jQuery .each() function shows always last link in iframe

I have some links on my page and everyone is linked to a popup which should load an iframe with a dynamic source attribute. The iframe has a div called 'pholder' in which the iframe should be loaded. So on every link should be another iframe. But it isn't. It's always the same. To be exactly, it's always the last link and I don't know why. Here you can see the HTML of the popup:
<div id="toPopup3">
<div id="videoContainer">
<div id="activeVideo">
<div class="pholder"></div>
</div>
</div>
</div> <!--toPopup3 end-->
I have to say that my links all have the class toPopup3 link + e. e is the maximum of Videos (0-23). So I use this code to add the iframe:
var videoLink;
var split;
$('[class^="topopup3 link"]').each(function(){
videoLink = $(this).attr('href');
split = videoLink.split("/");
});
$('.pholder').html('<iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&byline=0&portrait=0&color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
So it always shows the last source in the iframe and I don't get rid of it. Can someone help me?
Here is a link to the live version of the page: Live Page. The problem occurs at 'film production'. I also put console.log(split[3]); in the code to see the order of the links.
Edit: given a little more insight into your goal, I think it would be better to accomplish this with a clickhandler:
$('[class^="topopup3 link"]').on('click', function(){
var videoLink = $(this).attr('href');
split = videoLink.split("/");
$('.pholder').html('<iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&byline=0&portrait=0&color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
// may need to show the iframe modal or whatever here
});
Your not doing anything with the split variable until you are done looping, therefore the value will be the last one. If you are wanting to use each value, you need to move your subsequent $('.pholder')... code into your each block

DIV swap onclick

I'm currently trying to implement a content locking system to my site and as part of it would like to lock out an on-site mp3 player until the user has completed an offer.
So when the page loads it shows the player, but if they try to click on it, it pops up the content locker and once they've completed an offer it swaps the DIV for the fully usable player.
here's the code:
<div id="mobmp3">
<div id="yoursecDiv" style="display:block; z-index: 999;"> <a href="javascript:void(0)" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://c.themixtapesite.com/locker.js?guid=0512eafd69b18d22');document.body.appendChild(fileref); setTimeout(yourFunction, 3000);">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%" height="280" max-width="97.4%">
</iframe>
</a>
</div>
</div>
<!-- Place the Real Link within yourfirDiv which is set to not display
until yourFunction has been executed. -->
<div id="yourfirDiv" style="display:none;">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2"
frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%"
height="280" max-width="97.4%"></iframe>
</div>
So, as you can see, i'm trying to load up an iframe (the player) within yoursecDiv. then once they've completed the offer it reloads yourfirDiv which is the same player but without the content locker.
I was hoping by wrapping the <iframe> in the <a> tag i would achieve this, but alas, it doesn't work.
So i guess my question is:
Is there a way i can overlay a div (or something) over the iframe to act as the link to open the content locker?
this is now solved... after a bit of fresh air my brain started working and i simply used a transparent gif that i overlayed over the div. then set that gif as the trigger link.

How to make a div of iframe float on top of another div of iframe that should be the background of the page

I read many related questions but my case seems a little bit different that none of those really work for me.
What I'm trying to achieve is to have a floating radio player that play nonstop music throughout my blog. I'm using iframe to put my blog as the background of the whole page, then another iframe for the radio player that float on top the previous iframe.
I guess the reason that all methods I found couldn't work is because the property of my iframe:
<iframe src="my blog address" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="120%" width="120%"></iframe>
Following is what the entire page look like(I need the radio player to float on the top):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="radio_player">
<iframe src="http://douban.fm/partner/baidu/doubanradio" frameborder="0"></iframe>
</div>
<div id="blog_background">
<iframe src="http://swotong.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="120%" width="120%"></iframe>
</div>
</body>
</html>
I'm quite new to coding and posting questions here, thanks for any help.
Best Regards
try adding z-index:1 to the frame you want on top.
You can see it working here
you have to use a position property for this to work.
position attributes from css3.com

Google News Box, Open News Page in New Window/Tab

I have attached a Google News Box on one of my pages.
Right now, if the visitor click on the news, they will leave my site and go to the news site.
I'm wondering is it possible to insert target="_blank" somewhere so the news is loaded in new window/tab.
Note: the link is inside the google's iframe. so I was thinking if i can somehow to create the on-click event on-top of the google iframe while grab the it's url.
<iframe frameborder=0 marginwidth=0 marginheight=0 border=0
style="border:0;margin:0;width:928px;height:100px;"
src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?
rsz=large&format=728x90&q=Internet%20Retailng%20Aus&element=true" scrolling="no"
allowtransparency="true"></iframe>
Solution:
1: please refer to alfro's answer.
2: code below using the api
google.load("elements", "1", {packages : ["newsshow"]});
function onLoad() {
var options = {
"linkTarget" : "_blank"
}
var content = document.getElementById('news');
var newsShow = new google.elements.NewsShow(content,options);
}
Find in documentation google.search.Search.LINK_TARGET_BLANK.
It's what you need. If you put your code would be easier to give an example.
EDITED
It's a little messy, but so does google here:
Page A:
<head>...</head>
<body style="font-family: Arial;border: 0 none;">
<iframe height="90px" width="728px" frameborder="0" marginheight=0 marginwidth=0 scrolling="no" src="pageB.html"></iframe>
</body>
Page B (google):
<iframe height="90px" width="728px" frameborder="0" marginheight=0 marginwidth=0 scrolling="no" src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=small&q=Foreclosure,Mortgage Refinance&format=728x90"></iframe>
Google abandoned "newsshow". It had been deprecated for a long time but a few weeks ago newsshow just stopped working. I had to scramble to build a replacement for my sites.
Here is a Google News RSS replacement that in many ways is better:
http://www.gooplusplus.com/news-frame-guide.html
(BTW, links from the news stories are automatically opened in new tabs/windows.)
See this forum thread:
http://hypercube.us/forum/index.php?topic=1501.0

Control styling of elements within iFrame

im not sure if this is possible or not, but im trying to alter the style of elements contained within an iFrame using javascript.
I have tried the following which I believed in theory should work with no luck...
<script>
function click() {
window.frames[0].document.getElementById('daLink').style.backgroundColor="#000";
}
</script>
<a href="#" onclick="click()" >Test</a>
<iframe src="http://www.google.co.uk" width="600" height="400" id="daLink"></iframe>
That will only work if the iFrame Source is on the same domain.
Your code is not working due to the same-origin-policy!
Read more here: Javascript Security

Categories