Clever Geek Handbook

Passing lat and long to iframe

I have an iframe map with its coordinates, and two inputs with values ​​below them, and these values ​​are taken from the database, I want to pass these values ​​to the map coordinates, how can I do that? here is my code:

 <iframe width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q='+MYLAT+','+MYLONG+'&hl=es;z=14&amp;output=embed"></iframe>

<form>
<div class="form-group">
<input type="hidden" class="form-control" value="Latitude" id="lat">
</div>
<div class="form-group">
<input type="hidden" class="form-control" value="Longitude" id="long">
</div>
</form>
Run code


+3


source to share


2 answers


You cannot pass attributes directly to the iFrame DOM node due to security reasons. You need to find another way to transfer them to the card. Perhaps load a map with parameters.



0


source 


function changeloc()
{
var lat = document.getElementById('lat').value;
var long = document.getElementById('long').value;
var src = "https://maps.google.com/maps?q="+lat+","+long+"&hl=es;z=14&amp;output=embed";
document.getElementById('map').src = src;
}
      

        
        
        
      

    
<iframe width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" id="map" marginwidth="0" src="https://maps.google.com/maps?q='+MYLAT+','+MYLONG+'&hl=es;z=14&amp;output=embed"></iframe>

<form>
<div class="form-group">
<input type="text" class="form-control" value="Latitude" id="lat">
</div>
<div class="form-group">
<input type="text" class="form-control" value="Longitude" id="long">
</div>
</form>
<button onclick='changeloc();'>Change loc</button>
Run code




Try this, I added a botton which will change the src of the iframe

0


source






More articles:


All Articles