[英]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 :
我有以下URL:
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. 如果我粘贴上面的url,我将在浏览器中加载地图。 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);
});
Url
is not directly load on div .So you can append iframe
on div like this to load map. Url
不会直接加载div。因此,您可以在div上添加iframe
以加载地图。
$(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. 或者如果您不想使用
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>
The tag specifies an inline frame. 标签指定内联框架。
An inline frame is used to embed another document within the current HTML document. 内联框架用于在当前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>
You can display your map without iframe 您可以在不显示iframe的情况下显示地图
The tag defines an embedded object within an HTML document. 标签定义HTML文档中的嵌入对象。 Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.
使用此元素可在网页中嵌入多媒体(如音频,视频,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>
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 />');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.