Search code examples
javascriptphphtmllaraveliframe

trying to change iframe location from javascript

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&amp;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

Solution

  • 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&amp;output=embed';

    Replace the &amp; with a single & then. Encoding this as &amp; 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 &amp; (more precise, the browser said it has X-Frame-Options set to Deny), but it appears to work fine with just &.