HTML 谷歌地图-html教程-PHP中文网

在 HTML 中，我们在前面的文章中讨论了元素的一些属性和属性。它具有许多吸引网络技术在线用户的功能。 Google 地图是 Google 公司的功能之一，我们将在 HTML 代码中使用相同的 Google 地图来在网站上显示位置。主要用于公司网站准确识别其所在区域的位置。它通过使用 javascript 语言调用 HTML 来定位和设置公司地理位置的纬度和经度。

语法：

HTML 对每个标签都有通用语法来开发网页内容。

<html>
<body>
<script src="google-api url">
function()
{
}
</script>
</body>
</html>

登录后复制

HTML Google 地图的语法是在 script 标签中添加 Google API，然后我们将设置网页内容的地理位置。我们可以将一些HTML元素和属性对齐并使用到网页中来吸引用户，这将是公司和业务的增长。我们将根据业务需求定制具有用户友好环境的网页。

如何用 HTML 创建 Google 地图？

我们将使用 <script> 在我们的网页上调用 Google 地图 API标签。我们主要可以在HTML页面添加Google地图后设置标记；它包含三个步骤。 1. 我们将首先创建一个 HTML 页面， 2. 然后添加带有标记的地图。 3. 最后，我们将获得 API 密钥来验证位置。我们将根据定制的招股说明书使用预定义标签创建一个 HTML 页面，如果需要使用 <div> ，也会对齐页面中的样式属性。元素;我们将在网站中使用单独的模块视图分隔内容。</script>

添加带有标记的地图是在网页上创建 Google 地图的第二个级别。本节将描述如何将 javascript API 中的地图加载到网页中，并且我们还将编写使用 API 的 javascript 函数，为网页添加带有标记的地图。当我们在脚本标签中添加API时，回调参数将在脚本加载地图API后执行一些条件，例如initMap函数。如果我们在网页脚本中使用异步属性，浏览器允许 API 加载网页的其余渲染页面内容。在Google地图API URL的脚本标签中，我们将看到它包含API密钥的关键参数。本节我们不设置任何key，会自动生成API key，然后使用带参数的initMap函数调用回调参数。

每当我们使用带有脚本标签 HTML 标签的 javascript 函数加载网页时，initMap 函数将用于初始化并添加地图。我们将在函数中调用一些默认方法，例如 getElementById() 是 javascript 库中的函数之一，用于通过分隔

来查找网页上的地图位置。 HTML 中的标签。在 Script 函数中，我们将使用与 Java 编程语言中相同的 new 运算符创建地图实例，new google.maps.Map() 是在 javascript 函数中创建 Google 地图实例的语法。

我们将使用 HTML 中的预定义标签，例如

、侧边导航来定位网页中的地图位置；地图将按照第一个纬度和经度的顺序协调 HTML 页面。我们将设置最小和最大尺寸的缩放选项以及网页的纵向和横向导航。如果zoom属性设置了像0这样的值，则缩放剖面视图中的最低部分，并且它在单个页面上显示整个地图。对于网页上的高分辨率图像，我们可以在缩放属性中设置较高的值。我们将使用position属性来设置标记在网页上的位置。

我们在网页上创建地图时会在第三步中获取API key；该密钥将用于验证我们定制的 API 密钥中的地图和 javascript 函数。使用包含用于创建 API 密钥的选项的 Google Cloud Platform 控制台工具。

HTML Google 地图示例

以下是 HTML Google 地图的示例：

示例#1

代码：

<html>
<body>
<div id="m" style="width:402px;height:433px;background:green"></div>
<script>
function sample() {
var m1 = {
center: new google.maps.LatLng(52.3, -0.14),
zoom: 13,
mapss: google.maps.MapTypeId.HYBRID
}
var m2 = new google.maps.Map(document.getElementById("m"), m1);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>
</body>
</html>

登录后复制

输出：

HTML 谷歌地图

示例#2

代码：

<html>
<head>
<style>
#m {
height: 403px;
width: 102%;
}
</style>
</head>
<body>
<div id="m"></div>
<script>
function initMap() {
var loc = {lat: -26.334, lng: 132.034};
var m1 = new google.maps.Map(
document.getElementById('m'), {zoom: 3, center: loc});
var mar = new google.maps.Marker({position: loc, map: m1});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

登录后复制

输出：

HTML 谷歌地图

示例 #3

代码：

<!DOCTYPE html>
<html>
<body>
<div id="m1" style="width:402px;height:303px;"></div>
<br>
<div id="m2" style="width:402px;height:303px;"></div>
<br>
<div id="m3" style="width:402px;height:303px;"></div>
<br>
<div id="m4" style="width:402px;height:303px;"></div>
<script>
function sample() {
var choice1 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.ROADMAP
};
var choice2 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.SATELLITE
};
var choice3 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.HYBRID
};
var choice4 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.TERRAIN
};
var i = new google.maps.Map(document.getElementById("m1"),choice1);
var j = new google.maps.Map(document.getElementById("m2"),choice2);
var k = new google.maps.Map(document.getElementById("m3"),choice3);
var l = new google.maps.Map(document.getElementById("m4"),choice4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>
</body>
</html>

登录后复制

输出：

HTML 谷歌地图