如何在不使用API​​密钥的情况下在html页面内添加Google Map?

2021年4月8日17:31:48 发表评论 759 次浏览

在HTML页面内添加Google地图的方法有两种:

  1. 使用API​​密钥
  2. 不使用API​​密钥

要学习第一种情况,你可以按照本文学习,同时按照本文学习其他情况。

要将Google Map插入HTML页面内, 请按照以下步骤操作:

转到谷歌地图并搜索你想要的位置。

如何在不使用API​​密钥的情况下在html页面内添加Google Map?1

现在, 你将看到共享选项, 单击它。

如何在不使用API​​密钥的情况下在html页面内添加Google Map?2

现在, 将出现一个对话框, 以嵌入地图选项。

如何在不使用API​​密钥的情况下在html页面内添加Google Map?3

在对话框中将看到一个新选项, 用于复制html。你还可以选择要嵌入页面的地图大小。

如何在不使用API​​密钥的情况下在html页面内添加Google Map?4

现在将其粘贴到你的html页面中。

例子:如何在不使用API密钥的情况下在HTML页面内添加Google Map。

<!DOCTYPE html>
<html>
  
<head>
     <meta charset = "utf-8">
     <title>Customize the scroll-bar</title>
  
     <style media = "screen">
         body {
             background-image: linear-gradient(
                 to right, dodgerblue, darkblue);
         }
     </style>
</head>
  
<body>
     <center>
         <h1 style = "color:lawngreen;">
             Geeks For Geeks
         </h1>
          
         <div>
             <!-- Google Map Copied Code -->
             <iframe src =
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3506.2233913121413!2d77.4051603706222!3d28.50292593193056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce626851f7009%3A0x621185133cfd1ad1!2slsbin!5e0!3m2!1sen!2sin!4v1585040658255!5m2!1sen!2sin"
                     width = "400"
                     height = "300"
                     frameborder = "0"
                     style = "border:0;"
                     allowfullscreen = ""
                     aria-hidden = "false"
                     tabindex = "0">
             </iframe>
         </div>
     </center>
</body>
  
</html>

输出如下:

如何在不使用API​​密钥的情况下在html页面内添加Google Map?5

注意:该技术的问题在于它不使用API, 因此地图不会自动更新, 因此每次你都必须通过更改地图的HTML代码来手动更新地图时。


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: