i have many stores every store got latitude, longitude when i click location icon for any store i send latitude, longitude to javascript function and change iframe src in js function and i show model showing the iframe but the iframe not showing the location here is the code.
iframe error www.google.com refused to connect.
icon button
<a onclick="getLocation({{$store->lat}},{{$store->lon}})" data-toggle="modal" href="#edit_location"><i style="font-size: 25px; color: #009688;" class="fas fa-location-arrow"></i></a>
iframe in model
<div class="mapouter mt-3"><div class="gmap_canvas"><iframe id="gmap_canvas" src="" frameborder="0" scrolling="no" style="width: 100%; height: 400px;"></iframe><a href="https://fnftest.net" style="display:none">fnf test playground remake</a><style>.mapouter{position:relative;text-align:right;height:400px;width:100%;}</style><a href="https://www.googlemapsiframegenerator.com" style="display:none">Google Maps Iframe Generator - Free Html Embed Code</a><style>.gmap_canvas{overflow:hidden;background:none!important;height:400px;width:100%;}</style></div></div>
javascript function
function getLocation(lat,lon){
var loc = document.getElementById('gmap_canvas');
loc.src = 'https://maps.google.com/maps?q=' + lat + ',' + lon + '&hl=es;z=14&output=embed';
}
Note when i give iframe src any static location without js it works the problem when i change the src from js the error show
Where is your JS function located - I am assuming it is in an external script resource, and not directly contained inside the HTML document?
loc.src = 'https://maps.google.com/maps?q=' + lat + ',' + lon + '&hl=es;z=14&output=embed';
Replace the & with a single & then. Encoding this as & would only be necessary, if the context was HTML - but that is not the case, if this code resides in an external JS resource.
Google does give me the "connection refused" message when I try to use this URL with & (more precise, the browser said it has X-Frame-Options set to Deny), but it appears to work fine with just &.