Home/ Questions/Q 8898303
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T00:34:46+00:00

I’m trying to load the google map in div by a ajax request therefore,

  • 0

I’m trying to load the google map in div by a ajax request therefore, I’ve tried below code.

<script type="text/javascript">
$(document).ready(function() {
  $('a.lnk').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url);
    return false;
  });
});
</script>
</head>
<body>
<h1>Web page test.html</h1>
<a href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=6.9906664862927625,+80.74805527925491&aq=&sll=37.0625,-95.677068&sspn=36.094886,86.572266&vpsrc=0&ie=UTF8&t=m&z=14&ll=6.990666,80.748055&output=embed" title="Get extern" class="lnk">Get extern</a>
<div id="content">load here</div>

This code does not load the map but instead google map url if I tried a external html file to load then it works. Could any please tell how load a google map in ajax request to a div.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your browser is not gonna let you load anything from a different server in a div because of the same origin policy

    What you could do is loading the map in an iframe, that is a section of your HTML where you can load external sites securely.

    This would be the HTML:

    <h1>Web page test.html</h1>
<a href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=6.9906664862927625,+80.74805527925491&aq=&sll=37.0625,-95.677068&sspn=36.094886,86.572266&vpsrc=0&ie=UTF8&t=m&z=14&ll=6.990666,80.748055&output=embed" title="Get extern" class="lnk">Get extern</a>
<iframe id="content">load here</iframe>​

    And this the JavaScript:

    $(document).ready(function() {
    $('a.lnk').click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        $('#content').attr('src', url);
        return false;
    });
});​

    See a working example here

    • 0