如何将带有标记的谷歌地图添加到网站-yiteyi-C++库

谷歌地图是谷歌开发的网络地图服务。它提供卫星图像、街道地图、360°街道全景（街景）、实时交通状况（谷歌交通），以及步行、汽车、自行车（beta版）或公共交通的路线规划。

null

要在网站上添加带有标记的谷歌地图，需要三个基本步骤：

创建一个HTML页面

添加带有标记的地图

获取API密钥

第一步：创建一个Html页面。

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
                                                 <                                     head                                     >                       
                                                 <                                     style                                     >                       
                                                 #map {                       
                                                 width: 100%;                       
                                                 height: 400px;                       
                                                 background-color: grey;                       
                                                 }                       
                                                 </                                     style                                     >                       
                                                 </                                     head                                     >                       
                                                 <                                     body                                     >                       
                                                 <                                     p                                     >My Google Maps Demo</                                     p                                     >                       
                                                 <                                     div                                     id                                     =                                     "map"                                     ></                                     div                                     >                       
                                                 </                                     body                                     >                       
                         </                                     html                                     >                       

输出： 图片[1]-如何将带有标记的谷歌地图添加到网站-yiteyi-C++库给定的代码描述了设置div大小和颜色的CSS。style元素为地图设置div大小。div的高度设置为400像素，宽度设置为100%，以显示整个网页宽度的地图。图片[2]-如何将带有标记的谷歌地图添加到网站-yiteyi-C++库

代码为谷歌地图定义了页面的一个区域。div在输出中显示为灰色块，因为尚未添加贴图。

步骤2：添加带有标记的地图：

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
                                                 <                                     head                                     >                       
                                                 <                                     style                                     >                       
                                                 #map {                       
                                                 height: 400px;                       
                                                 width: 100%;                       
                                                 }                       
                                                 </                                     style                                     >                       
                                                 </                                     head                                     >                       
                                                 <                                     body                                     >                       
                                                 <                                     p                                     >My Google Maps Demo</                                     p                                     >                       
                                                 <                                     div                                     id                                     =                                     "map"                                     ></                                     div                                     >                       
                                                 <                                     script                                     >                       
                                                 function initMap() {                       
                                                 var test= {lat: -25.363, lng: 131.044};                       
                                                 var map = new google.maps.Map(document.getElementById('map'), {                       
                                                 zoom: 4,                       
                                                 center: test                       
                                                 });                       
                                                 var marker = new google.maps.Marker({                       
                                                 position: test,                       
                                                 map: map                       
                                                 });                       
                                                 }                       
                                                 </                                     script                                     >                       
                                                 <                                     script                                     async defer                       
                                                 src                                     =                       
                         "                           https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap                          "                                     >                       
                                                 </                                     script                                     >                       
                                                 </                                     body                                     >                       
                         </                                     html                                     >                       

说明：

在代码中，脚本从指定的URL加载API。
回调参数在加载API后执行initMap函数。
async属性允许浏览器在加载API时继续呈现页面的其余部分。
key参数包含API密钥。
在“key=”内键入api密钥。
该代码包含initMap函数，该函数在加载网页时初始化并添加映射。脚本标签可以用来添加你自己的javascript。
这段代码构造了一个新的Google maps对象，并向地图添加属性，包括中心和缩放级别。
在下面的代码中，是new google。地图。Map（）创建一个新的Google maps对象。
center属性告诉API地图的居中位置。地图坐标按以下顺序设置：纬度、经度。
zoom属性指定地图的缩放级别。缩放：0是最低的缩放，显示整个地球。将“缩放”值设置得更高，以更高的分辨率放大地球。

下面的代码在地图上标出了一个标记。position属性设置标记的位置。

第3步：获取API密钥 以下是获取API密钥所需的步骤：

转到下面提到的链接 https://console.developers.google.com/flows/enableapi?apiid=maps_backend，地理编码\后端，方向\后端，距离\矩阵\后端，高程\后端，位置\后端&reusekey=true .
创建新项目或从现有项目中选择。
单击“继续”以启用API。
在凭证页面上，获取API密钥（并设置API密钥限制）。

用自己的API密钥替换URL中密钥参数的值

输出： 图片[8]-如何将带有标记的谷歌地图添加到网站-yiteyi-C++库

示例：在谷歌地图上添加Geeksforgeks office city

输入：

                             <!DOCTYPE html>                           
                             <                                           html                                           >                           
                                                         <                                           head                                           >                           
                                                         <                                           style                                           >                           
                                                         #map {                           
                                                         height: 400px;                           
                                                         width: 100%;                           
                                                         }                           
                                                         </                                           style                                           >                           
                                                         </                                           head                                           >                           
                                                         <                                           body                                           >                           
                                                         <                                           h3                                           >GFG Google Maps Demo</                                           h3                                           >                           
                                                         <                                           div                                           id                                           =                                           "map"                                           ></                                           div                                           >                           
                                                         <                                           script                                           >                           
                                                         function initMap() {                           
                                                         var uluru = {lat: 28.501859, lng: 77.410320};                           
                                                         var map = new google.maps.Map(document.getElementById('map'), {                           
                                                         zoom: 4,                           
                                                         center: uluru                           
                                                         });                           
                                                         var marker = new google.maps.Marker({                           
                                                         position: uluru,                           
                                                         map: map                           
                                                         });                           
                                                         }                           
                                                         </                                           script                                           >                           
                                                         <                                           script                                           async defer                           
                                                         src=                           
                             "                               https://maps.googleapis.com/maps/api/js?                                                          key                                           =                           
                             AIzaSyB2bXKNDezDf6YNVc                                           -SauobynNHPo4RJb8&                                           callback                                           =                                           initMap                                           ">                           
                                                         </                                           script                                           >                           
                                                         </                                           body                                           >                           
                             </                                           html                                           >                           