2

As I have been trying to show the map in div tag in normal html. My problem in Below code: 1. i have just called the getId() to show the map on div tag. 2.i have used maps.google.com url with just passing the location name explicity 3.then get iframe as string , i have to show it in div 4. but after click on the button, nothing wil show on my web page.

i think my problem is, how to get the iframe and show it in div tag using javascript

<!doctype  html>
<head>
<script>

function getId() {
alert("function successfull"); 
        var addressHos = "sholinganallur" + "+India";    
        var url = "http://maps.google.com/maps?q=" + addressHos + "&output=embed";         
        var str = "<iframe width='500' height='300' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='" + url + "'></iframe>";
        document.getElementById("divmap").innerHTML = str;          
    }
</script>
</head>
<body>
<form method="get">
    <button id="lnkBtnMap" runat="server" onclick="return getId();">show</button>
<div id="divmap" >
</div>
</body>
</html>

Thanks In Advance

sona
  • 1,552
  • 3
  • 18
  • 37
Lucky
  • 59
  • 1
  • 9
  • Your problem could be this: http://stackoverflow.com/questions/9158024/iframe-with-external-page-not-working – Arno Jan 21 '14 at 12:07
  • But that would be strange for an url, that is supposed to be embedded, wouldn't it? – Tomáš Zato Jan 21 '14 at 12:13
  • Your problem, sangeetha, is that the iframe forces the page to refresh. Try this to see that I'm right: `window.onbeforeunload = function() {return 'You have unsaved changes!';}` I have no idea why. All urls do it. – Tomáš Zato Jan 21 '14 at 12:22

1 Answers1

0

Ok, that was a tough one. Took me a while to figure out

You're using a <form> and a <button> within it. In <form>, <button> acts as submit button and so refreshes the page. Because the page you were using were so small, you'd barelly notice it refreshed, expecially on localhost.

So prevent the click event to be processed by the form:

<button id="lnkBtnMap" runat="server" onclick="getId();return false;">Show</button>
Tomáš Zato
  • 50,171
  • 52
  • 268
  • 778
  • Yes, that i have noticed the page is refreshed while click on the button because of the button within form tag. and now am geeting the map without refreshing the page. by the code of return false. **Thank you once again** @Tomáš Zato – Lucky Jan 22 '14 at 10:00