在HTML页面内添加Google地图的方法有两种:
- 使用API密钥
- 不使用API密钥
要学习第一种情况,你可以按照本文学习,同时按照本文学习其他情况。
要将Google Map插入HTML页面内, 请按照以下步骤操作:
转到谷歌地图并搜索你想要的位置。
现在, 你将看到共享选项, 单击它。
现在, 将出现一个对话框, 以嵌入地图选项。
在对话框中将看到一个新选项, 用于复制html。你还可以选择要嵌入页面的地图大小。
现在将其粘贴到你的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代码来手动更新地图时。