数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在网站上添加 Google 地图？
在本文中，我们将探讨 Google 地图以及如何将 Google 地图添加到或嵌入到我们的 HTML 模板/网站中。将 Google 地图嵌入到网站后，我们可以在其中固定一个位置，以向用户显示商店或公司的当前位置。
步骤
以下是将 Google 地图嵌入到 HTML 页面中需要遵循的步骤：
我们需要生成一个 API 密钥才能私下使用 Google 地图。
创建 HTML 容器以放置 Google 地图。
在 HTML 文档中添加 Google 提供的外部脚本。
编写 JavaScript 代码以在容器内初始化地图。
我们将在下面详细探讨以上几点：
生成 API 密钥
我们可以从 Google 地图中获取位置数据，但在继续操作之前，我们需要生成 Google 地图密钥。此密钥将授权从 Google 地图收集数据。您需要按照以下简单步骤生成此密钥：
点击并访问以下链接以打开 Google Cloud Console。
创建或选择一个已创建的项目。
点击继续以启用 API 并启用**Maps JavaScript API**。
启用后，我们现在需要为此创建凭据。
现在导航到左侧边栏中菜单的凭据部分。
点击导航栏下方的“**创建凭据**”按钮，然后选择“**API 密钥**”以开始生成凭据。
创建凭据后，您将获得一个 API 密钥。
您可以使用此密钥将地图嵌入到您的网站中。
创建 HTML 容器以放置 Google 地图。
现在我们将为放置 Google 地图创建一个 HTML 容器。我们将在此示例中使用简单的 div 元素。您可以使用任何您喜欢的元素。您需要按照以下步骤执行此操作：
创建一个新的 HTML 页面。
在 body 部分内引入空 div 标签。此外，为该 div 分配一个唯一的 ID，以便稍后用于样式设置。
现在创建一个 style 标签，并在该标签内描述 div 的大小。
在 HTML 文档中添加 Google 提供的外部脚本
您需要在 HTML 文档中添加以下异步脚本以立即执行它。此脚本应位于回调中使用的 DOM 元素之后。在 URL 中，您需要输入您之前生成的 API 密钥，替换<YOUR_API_KEY>标签。
<script src=“https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap&libraries=&v=weekly” async> </script>
编写 JavaScript 代码以在容器内初始化地图
设置 HTML 后，我们需要初始化 JavaScript 以将地图带入容器中，并为用户提供地图控件。它将支持缩放、缩小、滚动等控件。
初始化**initMap()**函数。此名称不能更改，因为它是 Maps API 使用的内置函数。
在此对象中初始化纬度和经度以设置您要显示的位置。
创建一个新的**google.maps.Map**对象，该对象将容器元素作为输入。此对象将负责存储地图的中心位置和缩放级别。
示例
# map.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Set the size of the div element
that contains the map */
#map {
height: 400px;
width: 400px;
}
h2 {
color: #308d46;
}
</style>
</head>
<body>
<h1 style="color: green;">Welcome to Tutorials Point</h1>
<h2 style="color: grey;">
Add Google Map to your Webpage
</h2>
<!--The div element for the map -->
<div id="map"></div>
<!--Adding script by google -->
<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap&libraries=&v=weekly"async></script>
<script>
// Initialize and add the map
function initMap() {
// The location of Geeksforgeeks office
const tutorialsPoint_office = {
lat: 17.43827944602866,
lng: 78.39530424154626
};
// Create the map, centered at tutorialsPoint_office
const map = new google.maps.Map(
document.getElementById("map"), {
// Set the zoom of the map
zoom: 17.56,
center: tutorialsPoint_office,
});
}
</script>
</body>
</html>输出
836 次查看
