原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666

背景

海外项目需要用到谷歌地图，几经周折总算显示了地图，并去掉了可恶的暗黑水印，这里简述一下过程，给大家参考。

正文

说明：一般的思路是先查看API，写一个hello world，我也是这么做的，但是却遇到了地图加载失败(使用的API库未启用问题)，暗黑水印(未绑定信用卡启用结算账户问题)，这俩坑大大的浪费了我的时间，所以，如果你第一次用谷歌地图，建议参照下面的步骤走，避免浪费时间。
step1：注册账号谷歌账号https://accounts.google.com/signup；
step2：登录谷歌云端平台https://console.cloud.google.com；
step3：为账户绑定结算方式(绑定付费信用卡)，在如下接口进入，然后跟着提示走就可以了------这一步是解决暗黑水印问题必须的；

step4：创建项目：点击“位置1”，弹出“弹窗”,点击“位置2”新建项目；

step5：进入此项目中，并为它启动我们需要使用的API库(安卓库，iOS库或者js库)------这一步是解决Key生成并调用后仍然无法加载地图所必须的；

step6：创建API Key；

step7：调用谷歌地图API写一个hello world，这里以js API为例：
首先把官方文档地址放出来https://developers.google.com/maps/documentation/javascript/tutorial
如下是官方的hello world代码，区别的一点是，我加了"&language=en"，这是指定了默认语言是英语，用于地图标识，逆地理编码等情况下默认返回英语

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&language=en"
    async defer></script>
  </body>
</html>