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

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

  1. 使用API??密钥
  2. 不使用API??密钥
要学习第一种情况,你可以按照本文学习,同时按照本文学习其他情况。
要将Google Map插入HTML页面内, 请按照以下步骤操作:
【如何在不使用API??密钥的情况下在html页面内添加Google Map()】转到谷歌地图并搜索你想要的位置。
如何在不使用API??密钥的情况下在html页面内添加Google Map()

文章图片
现在, 将出现一个对话框, 以嵌入地图选项。
如何在不使用API??密钥的情况下在html页面内添加Google Map()

文章图片
在对话框中将看到一个新选项, 用于复制html。你还可以选择要嵌入页面的地图大小。
如何在不使用API??密钥的情况下在html页面内添加Google Map()

文章图片
现在将其粘贴到你的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()

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

    推荐阅读