一、Google Maps 简介
Google Maps 是谷歌提供的地图服务，通过其 JavaScript API，开发者可以在网页中嵌入地图，添加标记、路径、地理编码、路线导航等功能，适用于位置展示、物流追踪、LBS 应用等场景。
二、获取 Google Maps API Key
- 登录 Google Cloud 平台：https://console.cloud.google.com/
- 创建项目
- 启用 Maps JavaScript API、Geocoding API 等所需服务
- 获取 API 密钥（API Key）
- 设置配额限制和安全域名
三、引入 Google Maps 脚本
方式一：通过 <script> 标签加载
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
YOUR_API_KEY替换为实际的 API 密钥callback=initMap表示在加载完成后调用initMap函数
四、基本地图使用示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Google 地图示例</title><style>#map {height: 400px;width: 100%;}</style></head><body><h3>我的地图</h3><div id="map"></div><script>function initMap() {const location = { lat: 39.9042, lng: 116.4074 }; // 北京坐标const map = new google.maps.Map(document.getElementById("map"), {zoom: 10,center: location,});const marker = new google.maps.Marker({position: location,map: map,title: "北京"});}</script><script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script></body>
</html>
五、常用功能介绍
5.1 添加标记（Marker）
new google.maps.Marker({position: { lat: 31.2304, lng: 121.4737 },map: map,title: "上海"
});
5.2 信息窗口（InfoWindow）
const infowindow = new google.maps.InfoWindow({content: "<h4>这里是上海</h4>"
});
marker.addListener("click", () => {infowindow.open(map, marker);
});
5.3 绘制路线（DirectionsService）
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);directionsService.route({origin: "Beijing",destination: "Shanghai",travelMode: "DRIVING"
}, (result, status) => {if (status === "OK") {directionsRenderer.setDirections(result);}
});
六、使用注意事项
- Google Maps 在中国大陆部分网络环境可能无法访问
- 建议绑定域名进行 API Key 限制
- 免费配额有限（每月 200 美元额度）
七、学习资源推荐
- Google Maps JavaScript API 官网
- Google Maps 示例库
- Google Cloud Console
- 菜鸟教程 Google 地图
本文由“小奇Java面试”原创发布，转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。
