How to load `google map` to `div` directly to container?

Question

I require to load a map to my page. I have the URL for that which is :

https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en

if I paste the above url, I am getting the map loaded in the browser. Same way I am trying to load this map in to my web page. But nothing loads..

what is the correct way to load the above map in to my web page?

Here is my try:

$(function(){

  var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";

  $("#map").load(mapURL);

});

Live Demo

Answer 1

Url is not directly load on div .So you can append iframe on div like this to load map.

$(function() {
  var html = '<iframe src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en"></iframe>';
  $("#map").append(html);
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'><map>
<div id='map1'><map>

Or If you don't want to use iframe you cane use embed tag.

var html='<embed src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en" width=200 height=200 />';
 $("#map").append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'></div>

Answer 2

You can trigger DIV load Event

HTML iframe Tag

The tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

$(function(){
 $('div[onload]').trigger('onload');
});


function  displayMap() {
  var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
   
 $("#map").append("<iframe src=" + mapURL +"></iframe>"); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div onload="displayMap()" id ="map"></div>

You can display your map without iframe

HTML object Tag

The tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.

<div> 
    <object type="text/html" data="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en" width="800px" height="300px" style="overflow:auto;border:1px solid">
    </object>
</div>

Difference between and tag

Answer 3

Try this,

$(window).on('load', function(){          
    var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";          
    $("#map").html('<iframe src="'+mapURL+'" height="450" width="600"></iframe>');          
});

OR

$(window).on('load', function(){          
    var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";          
    $("#map").html('<object data="'+mapURL+'" width="600" height="450" type="text/html">Loading Map</object>');          
});

OR

$(window).on('load', function(){          
    var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
    $("#map").html('<embed id="map" src="'+mapURL+'" width=600 height=450 />');          
});