J'ai besoin de charger une carte sur ma page. J'ai l'URL de ce qui est:

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

Si je colle l'URL ci-dessus, je reçois la carte chargée dans le navigateur. De la même manière, j'essaie de charger cette carte dans ma page Web. Mais rien ne charge ..

Quelle est la bonne façon de charger la carte ci-dessus dans ma page Web?

Voici mon essai:

$(function(){

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

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

});

Démo en direct

4
user2024080 17 avril 2018 à 07:22

3 réponses

Meilleure réponse

Url n'est pas directement chargé sur div. Vous pouvez donc ajouter iframe sur div comme ceci pour charger la carte.

$(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>

Ou Si vous ne souhaitez pas utiliser iframe, vous pouvez utiliser la balise embed.

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>
6
Shree 17 avril 2018 à 04:55

Vous pouvez déclencher un événement de chargement DIV

Balise iframe HTML

La balise spécifie un cadre en ligne.

Un cadre en ligne est utilisé pour incorporer un autre document dans le document HTML actuel.

$(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>

Vous pouvez afficher votre carte sans iframe

Balise d'objet HTML

La balise définit un objet incorporé dans un document HTML. Utilisez cet élément pour incorporer du multimédia (comme l'audio, la vidéo, les applets Java, ActiveX, PDF et Flash) dans vos pages Web.

<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>

Différence entre et tag

5
Aman Kumar 17 avril 2018 à 04:55

Essaye ça,

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

OU

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

OU

$(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 />');          
});
1
Anfath Hifans 17 avril 2018 à 04:48