数据可视化网站模板财经新闻每日财经报道
本文由Tim Severien ， Nuria Zuazo和Mallory van Achterberg进行同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！
Google Maps是一种在线地图服务，可提供最新的路线图，商户列表，路线，街道图片等。
Google Maps有许多其他替代方法，例如Mapbox和Open Street Map 。 但是我认为，没有任何竞争对手能够与Google Maps相匹敌，这仅是其业务目录完整的唯一原因。 Google能够展示完整的，完整的地图，其中包含最新的业务详细信息，这主要归功于其搜索产品的交叉。
从简单的Static API到功能强大的JavaScript API ，这里有多种与Maps进行交互的API ，这是本文的重点。
当然，您可以在不利用提供的各种API的情况下将Google Maps放置在您的网站上。 当然，这使生活更轻松，并且仍然提供了许多有用的功能。 但是Maps JavaScript API可以让我们完全控制地图，以实现性能和自定义目的。
利用Google Maps JavaScript API
在本文中，我想向您展示如何充分利用Maps JavaScript API- 以正确的方式使用它。
为此，已经有很多教程和示例，但是很多时候都没有关注实现期望结果的最佳方法。 他们可以快速完成工作，但是没有考虑采取某种步骤的方法或原因。
可以在我们的GitHub存储库中找到本文的完整源代码。
创建基本地图画布
我们需要做的第一件事是建立一个简单的前端框架来构建映射应用程序。
创建HTML
让我们用以下标记创建一个HTML文件：
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Google Maps API Template</title><link rel="stylesheet" href="style.css" /></head><body><div id="map"></div><script src="script.js" defer></script></body>
</html>
这为我们提供了构建完整的地图应用程序的强大平台。
注意我们如何在脚本中使用defer属性。 这告诉浏览器尽快下载指定的脚本，但是要等到HTML解析完成后再执行它们。 重要的是，尽可能使用defer ，因为它可以防止页面渲染完成之前为了执行JavaScript代码而停止运行-为用户提供了轻松的加载体验。 眼花eagle乱的读者可能会注意到我们还没有包含Google Maps的JavaScript：这是有意为之的，稍后将进行解释！
构建即时回调
现在，从document.addEventListener('DOMContentLoaded', function () {})调用开始，设置我们的初始JavaScript文件script.js ：
document.addEventListener('DOMContentLoaded', function () {if (document.querySelectorAll('#map').length > 0){if (document.querySelector('html').lang)lang = document.querySelector('html').lang;elselang = 'en';var js_file = document.createElement('script');js_file.type = 'text/javascript';js_file.src = 'https://maps.googleapis.com/maps/api/js?callback=initMap&signed_in=true&language=' + lang;document.getElementsByTagName('head')[0].appendChild(js_file);}
});
#map长度检查是一种找出当前页面上是否存在特定元素的快速方法。 通常，相同的外部JavaScript文件会包含在整个网站上，并且很多时候仅某些页面需要代码的某些部分。 在这种情况下，仅当我们向用户展示地图画布时，我们才想执行此代码。 这样可以防止不必要的代码在不需要的页面上膨胀。 （性能很重要！）
一旦确定页面上有地图画布，我们可能会认为我们已经准备好进行操作，但是还要执行另一项检查。 默认情况下，无论请求页面使用哪种语言，Google Maps JavaScript API均以英语加载。解决此问题的一种好方法是根据<html>元素中的lang属性设置lang变量。 这将使我们能够为用户提供正确语言的Google Maps JS。 这对于包含所有语言的相同script.js文件的多语言（i18n）网站尤其有用。
抓取Google的JavaScript文件
现在该加载外部Google Maps JS文件了。 我们之所以将其保留到现在，而不是将其作为常规的<script>标记包含在HTML中，是为了防止没有地图画布的页面中不必要的代码膨胀。 要加载文件，我们创建一个新的<script>元素并将其注入DOM的<head>中。 由于Google的API为我们处理了回调，因此我们不需要做更多的事情：
var js_file = document.createElement('script');
js_file.type = 'text/javascript';
js_file.src = 'https://maps.googleapis.com/maps/api/js?callback=initMap&signed_in=true&key=YOUR_API_KEY&language=' + lang;
document.getElementsByTagName('head')[0].appendChild(js_file);
传递给API的查询字符串参数中需要注意一些有趣的事情。
首先，我们将lang变量作为language参数传递，以指示Google我们希望地图使用哪种语言。
其次，我们将signed_in参数设置为true 。 这是为了增加地图的个性化（例如，它将使您的加星标位置可见）。
接下来，我们将key参数与API密钥一起传递（稍后会详细介绍）。
最后，最重要的是，我们使用callback参数指定回调函数。 这告诉Google成功获取文件后应触发我们的哪些功能。
如果没有有效的key参数，Google Maps JS API仍然可以使用。 但是，我们将收到JavaScript错误控制台警告消息。 因此，我们应该遵循Google的指南确保自己获得免费的API密钥。
初始化地图画布
现在我们已经设置了初始化函数调用，我们可以继续定义回调函数initMap() 。 成功加载Google Maps JS API会触发的功能。
var map;function initMap() {map = new google.maps.Map(document.getElementById('map'), {center: {lat: -34.397, lng: 150.644},zoom: 8});
}
创建新的Google Map时，最好在全局范围内（在任何函数之外）为地图创建变量，以便以后与地图进行交互时更容易。 这就是为什么我们在initMap()之外定义map的initMap() 。
现在我们有了一个空的map变量，我们可以继续在initMap函数中为其分配Google Map对象。 这与Google的“简单地图”示例完全相同。 需要注意的重要一件事是，我们必须同时指定center和zoom ，否则地图根本不会初始化。 没有默认值！
不要忘记CSS
使初始基本地图画布起作用的最后一个重要步骤是在我们的style.css文件中提供一些CSS：
html, body {height: 100%;margin: 0;padding: 0;
}#map {height: 100%;
}
我们今天要介绍的最常见的陷阱是忘记为#canvas元素设置height属性。 不管本文中涉及的所有其他内容，如果没有设置height （或min-height ）CSS属性，我们将完全看不到地图。 应用于<html>和<body>的样式仅用于使画布全屏显示。
将标记添加到地图画布
一旦显示了基本的地图画布，最常见的下一个任务是在地图上绘制标记。 在大多数编程上下文中，我始终会提出的一条建议是：尽可能将数据与逻辑分离。 在这种情况下，可以通过将标记详细信息存储在单独的JSON文件中来说明这一点。
为标记创建一个JSON文件
继续创建一个名为markers.json的JSON文件：
[{"lat": 53.817680,"lng": -1.537657},{"lat": 53.790123,"lng": -1.53243},{"lat": 53.756745,"lng": -1.5309087},{"lat": 53.6474675,"lng": -1.49564554},{"lat": 53.69123456,"lng": -1.6545466}
]
将Google Maps标记存储为纬度和经度值而不是地址始终是一个好主意。 否则，我们必须在运行时使用Google的地理编码服务 。 这是一个严格的使用限制的独立API，还会将另一个外部实体添加到地图初始化过程中，从而增加了延迟。
现在，我们的JSON文件已设置完毕，我们需要在初始化地图时使用它。
绘制标记
首先，通过使用新的闪亮的Fetch API修改initMap()函数，以在映射已初始化后获取markers.json文件，并将回调函数传递给新函数plotMarkers() 。 我们还在此处使用promise，以确保在将响应传递给回调函数之前将其解析为JSON：
fetch('markers.json').then(function(response){return response.json()}).then(plotMarkers);
然后让我们继续定义plotMarkers() ：
var markers;
var bounds;function plotMarkers(m)
{markers = [];bounds = new google.maps.LatLngBounds();m.forEach(function (marker) {var position = new google.maps.LatLng(marker.lat, marker.lng);markers.push(new google.maps.Marker({position: position,map: map,animation: google.maps.Animation.DROP}));bounds.extend(position);});map.fitBounds(bounds);
}
与我们的map变量一样，我们希望在全局范围内的函数之外定义更多变量。 在此功能中，我们将使用markers和bounds ，它们在以后的其他地方都可能有用，因此，最好将它们放在全局范围内。
在plotMarkers函数内部，我们需要做的第一件事是将markers变量设置为一个空数组，并将bounds变量设置为一个空的Google LatLngBounds对象。 我们将使用LatLngBounds对象跟踪需要在画布上可见以适合所有标记的区域。
现在，我们需要遍历每个标记，提供一个匿名回调函数，该函数根据JSON文件中可用的lat和lng参数创建一个新的Google position对象。 一旦知道了这一点，我们将创建一个新的Google地图标记对象并将其推送到我们的markers数组中。 最后，我们将使用新位置扩展边界：
var position = new google.maps.LatLng(this.lat, this.lng);markers.push(new google.maps.Marker({position: position,map: map,animation: google.maps.Animation.DROP})
);bounds.extend(position);
需要注意的一件事：创建新的Google地图标记对象时，唯一需要的参数是position和map 。 position参数可以是包含lat和lng参数的对象，也可以是Google position对象（如下所示）。 map参数只是我们要在其上绘制标记的Google地图对象。 我们还提供了一个animation参数：这不是必需的，但易于实现-每个人都喜欢一点动画！
重新居中地图画布
现在，我们遍历了所有标记，将它们添加到地图中并建立了画布边界，我们将调用map.fitBounds()将地图画布重新围绕绘制的标记center ，从而覆盖初始center并zoom我们在初始化地图对象时提供的参数。 这非常有用，因为它使我们无需担心我们的center或zoom参数即可更新markers.json文件。
请参阅CodePen上SitePoint （ @SitePoint ）提供的Pen Google Maps JS API示例 。
闭幕致辞
现在，我们应该有一个可以运行的应用程序，它可以显示全屏Google Maps画布，并可以通过JSON文件在该地图上绘制标记。
如果您有兴趣进一步进行开发，那么下一个合理的步骤将是实现InfoWindows ，该操作将在单击标记时出现。
如果您有兴趣在本文已经提供的功能的基础上进行构建，那么一个不错的起点就是着眼于自定义地图上绘制的图标。 只需将URL作为icon参数传递给新标记对象即可完成。
如果您还有其他改进或建议，请随时在评论中添加它们。
而且请记住，完整的源代码可通过我们的GitHub repo获得 。
From: https://www.sitepoint.com/google-maps-javascript-api-the-right-way/