How to load `google map` to `div` directly to container? - javascript

I require to load a map to my page. I have the URL for that which is :
https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en
if I paste the above url, I am getting the map loaded in the browser.
Same way I am trying to load this map in to my web page. But nothing loads..
what is the correct way to load the above map in to my web page?
Here is my try:
$(function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").load(mapURL);
});
Live Demo

Url is not directly load on div .So you can append iframe on div like this to load map.
$(function() {
var html = '<iframe src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en"></iframe>';
$("#map").append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'><map>
<div id='map1'><map>
Or If you don't want to use iframe you cane use embed tag.
var html='<embed src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en" width=200 height=200 />';
$("#map").append(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'></div>

You can trigger DIV load Event
HTML iframe Tag
The tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
$(function(){
$('div[onload]').trigger('onload');
});
function displayMap() {
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").append("<iframe src=" + mapURL +"></iframe>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div onload="displayMap()" id ="map"></div>
You can display your map without iframe
HTML object Tag
The tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.
<div>
<object type="text/html" data="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en" width="800px" height="300px" style="overflow:auto;border:1px solid">
</object>
</div>
Difference between and tag

Try this,
$(window).on('load', function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").html('<iframe src="'+mapURL+'" height="450" width="600"></iframe>');
});
OR
$(window).on('load', function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").html('<object data="'+mapURL+'" width="600" height="450" type="text/html">Loading Map</object>');
});
OR
$(window).on('load', function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").html('<embed id="map" src="'+mapURL+'" width=600 height=450 />');
});

Related

How can I link image to another page?

I am currently working on my school project website and I am really having a hard time coding.
So in my website I made an image slider and I wanted the images to be linked to another page, like if the user clicked the image they will be redirected to another page that contains information regarding the image they clicked. I also wanted a hover text when the mouse is pointed on the image that shows the title of it.
I tried to search and to watch videos on how to link images but nothing works.
Here's my code:
<script type="text/javascript">
<!-->
var image1=new Image()
image1.src="e.jpg"
var image2=new Image()
image2.src="g.jpg"
var image3=new Image()
image3.src="h.jpg"
//-->
</script>
<style type="text/css">
#gallery {
width: 100%;
height: 100%;
}
#gallery img {
width: 55%;
}
</style>
<DOCTYPE!html>
<html>
<body>
<center>
<div id="gallery">
<img src="e.jpg" name="slide" alt="Track race">
<script type="text/javascript">
<!--
var step=1
function slideit(){
document.images.slide.src=eval("image"+step+".src")
if(step<3)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</div>
</center>
</body>
</html>
onclick on a image to navigate to another page using Javascript
3rd best answer:
I'd set up your HTML like so:
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" id="bottle" />
Then use the following code:
<script>
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
var image = images[i];
image.onclick = function(event) {
window.location.href = this.id + '.html';
};
}
That assigns an onclick event handler to every image on the page (this may not be what you want, you can limit it further if necessary) that changes the current page to the value of the images id attribute plus the .html extension. It's essentially the pure Javascript implementation of #JanPöschko's jQuery answer.

JS button pressed and resize iframe

When i pressed a button in the iframe, it disappears the tag but doesnt resize the iframe size. when the ajax is done should call the AjustResizeIframeHeight method in the other page
Any suggestion to do that?
UPDATE
page with iframe
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>
<iframe id"form-iframe" width="100%" style="border: none" src="{{ notes }}" onload='javascript:resizeIframe(this);'>
</iframe>
content the iframe:
<a href="#" onclick="xpto2(1,{{ n.id }});parentNode.parentNode.removeChild(parentNode)" >Don't show again</a>
<script>
function xpto2(status,noteid) {
var request = $.ajax({
....
});
request.done(function() {
window.parent.AdjustIframeHeight();
});
}
</script>
Added the window.parent.AdjustIframeHeight() in the ajax function, but it says "unresolved function or method"
When you AJAX call is done, it does nothing because you have an empty function.
getElementById("form- iframe") will find nothing because there is no element with id form- iframe.
If the page in your iframe has the same host, protocol and port, you should be able to access the function via window.parent.AdjustIframeHeight().
If host, protocol or port do not match, you have to use Window.postMessage from your iframe and listen for message events on the parent page.
Solved
The solution was to add a div and then call the div to the method
page with iframe
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
function AdjustIframeHeight(i) {parent.AdjustIframeHeight(document.getElementById("page").scrollHeight);
</script>
<iframe id"form-iframe" width="100%" style="border: none" src="{{ notes }}" onload='javascript:resizeIframe(this);'>
</iframe>
content the iframe:
<div id="page">
<a href="#" onclick="xpto2(1,{{ n.id }});parentNode.parentNode.removeChild(parentNode)" >Don't show again</a>
<\div>
<script>
function xpto2(status,noteid) {
....
});
request.done(function() {
request.done(function() {
parent.AdjustIframeHeight(document.getElementById("page").scrollHeight);
});
}
</script>

Hide form from parent page until specific iframe element ID loads

All I need is to show parent page form only if specific element ID loads inside iframe. parent/iframe are on the same domain. How can I achieve that using javascript?
<form id="Search" action="../search.php" target="my-iframe" method="post">
<input type="text" id="location" name="keywords[all_words]" />
<a href="#" onclick="document.getElementById('Search').submit()" >Search</a>
</form>
<iframe id="myiframe" src="../page.html" name="myiframe" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
You can use jQuery to attach a load event to the iframe. Here's a working example: http://jsfiddle.net/kPqbS/
You can use something like this:
// wait for the page to finish loading
window.onload = function(){
// hide your form
document.getElementById('Search').style.display = 'none';
// get the document of the iframe
var frameDocument = document.getElementById('myiframe').contentWindow.document;
// if this is true the element with id 'test' is in the frame
if(frameDocument.getElementById('test')){
// show your form
document.getElementById('Search').style.display = 'block';
}
}

Reload iframe using javascript

I have a jsp page with iframe in it.
for example: worklist.jsp
<html>
<head>
<body>
<iframe height="15%" marginheight="0px" marginwidth="0px" scrolling="no" src="menuBanner.jsp" style="border:0; padding: 0px; position:absolute;" width="960px">
</iframe>
<div><button data-dojo-type="dijit.form.Button" value="Reload" id="reload" onclick="reload();">Reload</button></div>
</body></head></html>
On click of a button, i need to reload only iframe page.
I tried the below script, but its reloading the whole page(worklist.jsp)
function reload(){
location.reload();
}
You can update/refresh the iframe by setting the src to the current src.
Here is an example.
var test = document.getElementById('iframeId');
test.src = iframe.src;
This way works for cross domain. The example in the comments are less hacky if iFrames are on the same domain.
function reload( {
document.getElementById('iFrameID').contentDocument.location.reload(true);
}
you can try:
var iframe = document.getElementById('YourIFrameId');
iframe.src = iframe.src + '?c=' + Math.random();
i think without changing the src attribute you will not be able to reload your iframe.
You can do like this.
Get the iframe src and assign again to the src of the iframe
<script>
function test()
{
$('#subpage_frame').attr('src',$('#subpage_frame').attr('src')) ;
}
</script>
<iframe src="test.com" onload="Loaded();" id="subpage_frame"></iframe>
<button onclick="test();">Refresh button</button>

Load webpage in div on mouse-over effect of link

I am developing a website (using php, html and css). I have a page for "news and events" which contains list of urls. What I want to do is on mouse-over over a link, a small miniature of the corresponding website should be loaded in a div, so that the user knows what type of news the link contains.
I have tried code on mouse-over for images and videos, but unable to do the same for webpage.
For image :
Happy Birthday<br /> <div id="loadarea" style="width: 600px"></div>
For Video :
<a onClick="document.getElementById('dynloadarea').innerHTML='<iframe src=\'osmosis.mpg\' width=\'300\' height=\'300\' scrolling=\'auto\' frameborder=\'0\'></iframe>'"> Osmosis</a> <div id="dynloadarea"></div>
-Thanks in advance !
use blockUI
examples are here :
http://jquery.malsup.com/block/#demos
try this:
$('a').hover(function(){
var imgpath = $(this).attr('href');
$('#loadarea').load(imgpath)
}, function(){
$('#loadarea').empty()
})
You will need jQuery .load().
$('a').hover(function(){
var path = $(this).attr('href');//Get the path
$('#result').load(path);//Load contents into a div#result
, function() {
$('#result').show();
}
});
$('a').mouseout(function(){
$('#result').hide();
});
You will only be able to load pages on the same server.
$(document).ready(function(){
$('#a').mouseover(function(){
$('#page').css('visibility','visible');
$('#ss').attr('src',"http://www.w3schools.com/css/default.asp");
});
$('#a').mouseout(function(){
$('#page').css('visibility','hidden');
});
});​
Happy Birthday<br />
<div id="page">
<iframe width="300" height="300" scrolling="auto" id="ss">
</iframe>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Try this.
<p id="p3">Apple</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">
<script src="http://codegena.com/assets/js/image-preview-for-link.js"></script>
<script type="text/javascript">
$(function () {
$('#p3 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'pageload' });
});
</script>

Categories