Как загрузить `google map` в` div` прямо в контейнер?

Мне нужно загрузить карту на мою страницу. У меня есть URL-адрес:

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

если я вставлю указанный выше URL, я получу карту в браузере. Таким же образом я пытаюсь загрузить эту карту на свою веб-страницу. Но ничего не загружает ..

как правильно загрузить приведенную выше карту на мою веб-страницу?

Вот моя попытка:

$(function(){

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

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

});

Живая демонстрация

javascript jquery html google-maps

17.04.2018 06:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 082

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Попробуй это,

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

ИЛИ ЖЕ

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

ИЛИ ЖЕ

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

Я не могу загрузить без iframe ..? ты можешь обновить мой plunkr?

— 17.04.2018 06:29

17.04.2018 06:28

Ответ принят как подходящий

Url не загружается напрямую в div. Таким образом, вы можете добавить iframe в div, как это, для загрузки карты.

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

Или, если вы не хотите использовать iframe, вы можете использовать тег 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>

17.04.2018 06:32

Вы можете вызвать событие загрузки DIV

HTML iframe Tag

Тег определяет встроенный фрейм.

Встроенный фрейм используется для встраивания другого документа в текущий HTML-документ.

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

Вы можете отображать свою карту без iframe

HTML object Tag

Тег определяет внедренный объект в HTML-документ. Используйте этот элемент для встраивания мультимедиа (например, аудио, видео, Java-апплетов, ActiveX, PDF и Flash) на свои веб-страницы.

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

Разница между и тегом

В чем разница между object и iframe-?

— 17.04.2018 06:43

@ user2024080, проверьте здесь различия между iframe, object и embed: bencreasy.com/object-versus-embed

— 17.04.2018 06:54

17.04.2018 06:34