HTML 谷歌地图

2025 年 3 月 25 日 | 阅读 2 分钟

HTML 谷歌地图用于在您的网页上显示地图。您只需在基本 HTML 页面中添加地图即可。

语法

<!DOCTYPE html>
<html>
<body>
<h1>First Google Map Example</h1>
<div id="map">My map will go here...</div>
</body>
</html>

设置地图大小

您可以使用以下语法设置地图大小

如何创建函数来设置地图属性？

您可以通过创建函数来设置地图属性。这里，函数是 myMap()。此示例显示了以伦敦（英格兰）为中心的谷歌地图。

我们必须使用位于谷歌的 JavaScript 库提供的谷歌地图 API 的功能。使用以下脚本引用谷歌地图 API，并回调 myMap 函数。

示例

<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:400px;height:400px;background:grey"></div>
<script>
function myMap() {
var mapOptions = {
    center: new google.maps.LatLng(51.5, -0.12),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
</html>

示例说明

mapOptions: 这是一个定义地图属性的变量。

center: 它指定地图的中心位置（使用纬度和经度坐标）。

zoom: 它指定地图的缩放级别（尝试调整缩放级别）。

mapTypeId: 它指定要显示的地图类型。支持以下地图类型：ROADMAP、SATELLITE、HYBRID 和 TERRAIN。

var map=new google.maps.Map(document.getElementById("map"), mapOptions): 它在

id 为 "map" 的元素中创建了一个新地图，使用了传入的参数（mapOptions）。

HTML 多地图

您可以在同一个示例中使用不同的地图类型。

示例

<!DOCTYPE html>
<html>
<body>
<div id="googleMap1" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap2" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap3" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap4" style="width:400px;height:300px;"></div>
<script>
function myMap() {
  var mapOptions1 = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var mapOptions2 = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  var mapOptions3 = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var mapOptions4 = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var map1 = new google.maps.Map(document.getElementById("googleMap1"),mapOptions1);
  var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapOptions2);
  var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapOptions3);
  var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapOptions4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
</html>

下一个主题HTML5 Semantics

HTML 谷歌地图

设置地图大小

示例

示例说明

HTML 多地图

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 谷歌地图

设置地图大小

示例

示例说明

HTML 多地图

示例

相关帖子

HTML5 迁移

HTML5 新元素

HTML Canvas

HTML 事件属性

HTML 音频

HTML5 用户手册

HTML5 教程

HTML SVG

HTML 5 标签

HTML 视频

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器