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

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

3 answers

  • answered 2018-04-17 04:22 Anfath Hifans

    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 />');          
    });
    

  • answered 2018-04-17 04:22 Shree

    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>

  • answered 2018-04-17 04:22 Aman Kumar

    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