简体   繁体   中英

Iframe is set to click event . it works for First click after opening page. But not works for Second time. Please help On this

Using google map API V3, I have created One html page. It perfectly load gmap and i set button to load another web based map(mapmyindia.com) in Iframe. basically it took the parameter(lat/long) from gmap and fetch into that frame to load. it works on 1st click and navigate the current gmap location. After panning it another location and clicking to submit button it supposed to load current location of gmap into Iframe. But it doesn't work for second time. Kindly review my code and Help......!

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
var marker
function initialize()
{
var mapOpt = {
  center:new google.maps.LatLng(20.6588,80.9562),
  zoom:6,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
map=new google.maps.Map(document.getElementById("googleMap"),mapOpt);



google.maps.event.addListener(map, 'mousemove', function(event) {
        document.getElementById("pp").value = map.getCenter().lat() + "," +map.getCenter().lng();
        });


}
google.maps.event.addDomListener(window, 'load',initialize);
function copyText()
{
var xy=map.getCenter().lat()+ "," +map.getCenter().lng();

document.getElementById("latlng").value=xy;
document.getElementById("Zoom").value=map.getZoom();
}

function copyText1()
{
var xy=map.getCenter().lat()+ "," +map.getCenter().lng();
}



function OfferTwo(){
var mmy = map.getCenter().lng() + "," +map.getCenter().lat();
var sUrl = document.getElementById('offer2').src;
//var Zm= map.getZoom();
var Zm= '8';
document.getElementById('offer2').src = 'http://maps.mapmyindia.com/embed.html#current:'+Zm+','+mmy;
}


</script>
</head>
<body>
<input type= "text" ID=latlng>
<input type="text" ID=Zoom size="5" maxlength="2">
<input type ="text" ID="pp" >
<button onClick="copyText()">Submit</button>
<button onClick="OfferTwo()">Go To MMy</button>
<p Id="mmyurl">MamMyIndia Link</p>



<br><br>
<div id="googleMap"style="width:700px;height:500px;"></div>
<iframe id="offer2" Width="700" Height ="500"></iframe>

</body>
</html>

your script only changes the hash inside the url, when you click on the button the 2nd time the browser will try to jump to an anchor instead of reloading the map.

Add a changing parameter to the QUERY_STRING:

document.getElementById('offer2').src 
  = 'http://maps.mapmyindia.com/embed.html?'+
     +'#current:'+Zm+','+mmy;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM