HTML Google地图 HTMLGoogle地图|HTML5

本文概述

设置地图大小
示例说明

HTML Google Map用于在你的网页上显示地图。你只需在基本HTML页面上添加地图即可。
句法：

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

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

< div id="map" style="width:400px; height:400px; background:grey"> < /div>

如何创建设置地图属性的功能？
你可以通过创建函数来设置地图属性。在这里, 函数是myMap()。本示例显示了以英国伦敦为中心的Google地图。
我们必须使用Google的JavaScript库提供的Google Maps API的功能。使用以下脚本通过回调myMap函数来引用Google Maps API。

< script src="https://maps.googleapis.com/maps/api/js?callback=myMap"> < /script>

例：

< !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：这是一个变量, 用于定义地图的属性。
中心：指定地图中心的位置（使用纬度和经度坐标）。
zoom：指定地图的缩放级别（尝试尝试缩放级别）。
mapTypeId：指定要显示的地图类型。支持以下地图类型：ROADMAP, SATELLITE, HYBRID和TERRAIN。
【HTML Google地图】var map = new google.maps.Map（document.getElementById（“ map”）, mapOptions）：它将在