谷歌地图集成

Showing location on maps is always a needed feature in most of the web and mobile applications. Map service will be required in ERP, CRM, etc. Directory listing applications mainly depends on the Map service.

在大多数Web和移动应用程序中，始终需要在地图上显示位置。 ERP，CRM等将需要地图服务。目录列表应用程序主要取决于Map服务。

Google Maps is very popular among developers. It is very easy to use and had many rich functionalities. In this tutorial, you will learn, how to integrate Google Maps in Angular.

Google Maps在开发人员中非常受欢迎。 它非常易于使用，并具有许多丰富的功能。 在本教程中，您将学习如何在Angular中集成Google Maps。

Previously Google Maps is free to use. But as of now, Google has limited access to its map service. However, still, many companies depend on Google Maps, why because the end-user likes Google Maps when compared to other Maps service providers.

以前， Google Maps是免费使用的。 但是到目前为止，Google对其地图服务的访问受到限制。 但是，仍然有许多公司依赖Google Maps，这是因为与其他Maps服务提供商相比，最终用户喜欢Google Maps。

Google Maps Platform offers a free $200 monthly credit for Maps, Routes, and Places With the $200 monthly credit, the vast majority of customers find their use cases are completely free. You won’t be charged until your usage exceeds $200 in a month.

Google Maps Platform每月免费提供$ 200的Google Maps，Routes and Places信用额度。有了$ 200的月度信用额度，绝大多数客户发现他们的用例是完全免费的。 在您每月的使用费超过200美元之前，不会向您收费。

You can refer to the billing details using the below link.

您可以使用以下链接查看结算明细。

In this tutorial, you will learn:

在本教程中，您将学习：

How to get Google Maps API Key?

如何获取Google Maps API密钥？ How to Integrate the Google Maps in Angular Application?

如何在Angular应用程序中集成G​​oogle Maps？

获取Google Map API密钥 (Get Google Map API Key)

So First, we need to get the access api key from Google Maps. I will explain this in a step by step guide. Integrating Google Maps is very easy if you got your api key.

因此，首先，我们需要从Google Maps获取访问api密钥。 我将在逐步指南中对此进行解释。 如果您拥有api密钥，则集成Google Maps非常容易。

Go to Google Developer console using the below link:

使用以下链接转到Google Developer Console：

You need to sign-in using your Google account. If you are already signed in, it will show a page like below:

您需要使用您的Google帐户登录。 如果您已经登录，它将显示如下页面：

Google Maps API Key Example 1 Google Maps API密钥示例1

2. First, we need to create a project to enable Google Maps service. So, click the NEW PROJECT button in the above image.

2.首先，我们需要创建一个项目以启用Google Maps服务。 因此，单击上图中的NEW PROJECT按钮。

3. After you clicked the New Project, then it asks you to fill the project name. You can give your desired project name. Then click the CREATE button:

3.单击“新建项目”后，它会要求您填写项目名称。 您可以提供所需的项目名称。 然后单击创建按钮：

Google Maps API Key Example 2 Google Maps API密钥示例2

4. Once Project is created, It will show the created project name. Then click the SELECT PROJECT:

4.创建项目后，它将显示创建的项目名称。 然后单击“选择项目”：

5. Now we need to enable Google Maps service to this project. So click the ENABLE APIS AND SERVICES button:

5.现在，我们需要为该项目启用Google Maps服务。 因此，请点击启用API和服务按钮：

6. Select Maps JavaScript API card in the below image:

6.在下图中选择Maps JavaScript API卡：

7. Click the ENABLE button to enable Google Maps services:

7.单击“启用”按钮以启用Google Maps服务：

8. Once Google Maps enabled, it will look like below:

8.启用Google地图后，将如下所示：

9. Now we need to get API credentials for Google Maps. So First click the triple horizontal bar and Select APIS & Service -> Credentials:

9.现在，我们需要获取Google Maps的API凭据。 因此，首先单击三横线，然后选择“ APIS和服务->凭据”：

10. Click the CREATE CREDENTIALS button:

10.单击CREATE CREDENTIALS按钮：

11. Now Choose the API Key:

11.现在选择API密钥：

12. It will show the API Key like below. Copy this API Key. This key will be used in the Angular Google Maps Plugin:

12.它将显示API密钥，如下所示。 复制此API密钥。 此密钥将在Angular Google Maps插件中使用：

安装Angular Google Maps插件 (Install Angular Google Maps Plugin)

第1步：(Step 1:)

Create an Angular Project using:

使用以下命令创建一个Angular项目：

ng new GoogleMapsExample

Open the created Angular Project using VS Code editor.

使用VS Code编辑器打开创建的Angular Project。

第2步： (Step 2:)

Now, Install the Angular Google Maps plugin using the below command:

现在，使用以下命令安装Angular Google Maps插件：

npm install @agm/core

第三步： (Step 3:)

Open the src/app/app.module.ts and import the AgmCoreModule. You need to provide a Google Maps API key here to be able to see a Map. We already had the API key. So paste the API key here.

打开src / app / app.module.ts并导入AgmCoreModule 。 您需要在此处提供Google Maps API密钥才能看到地图。 我们已经有了API密钥。 因此，请在此处粘贴API密钥。

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { AgmCoreModule } from '@agm/core'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, AgmCoreModule.forRoot({ apiKey: 'YOUR-GOOGLE-MAPS-API-KEY-HERE' }) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

第4步：(Step 4:)

Open the src/app/app.component.ts file and create latitude and longitude variables with values.

打开src / app / app.component.ts文件，并使用值创建纬度和经度变量。

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'Angular Google Maps Example'; lat = 13; lng = 80; }

步骤5 ：(Step 5:)

Open the src/app/app.component.html file and call the <agm-map> tag to show the location on the Google Maps.

打开src / app / app.component.html文件，然后调用<agm-map>标记以在Google Maps上显示位置。

<!-- this creates a google map on the page with the given lat/lng from --> <!-- the component as the initial center of the map: --> <agm-map [latitude]="lat" [longitude]="lng"> <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> </agm-map>

Open the src/app/app.component.scss file and set the height of the Map.

打开src / app / app.component.scss文件并设置地图的高度。

agm-map { height: 600px; }

步骤6：(Step 6:)

That’s all. Everything is done. Now the Google Maps service will display the map on your component page. Preview the app using below command.

就这样。 一切都完成了。 现在，Google Maps服务将在您的组件页面上显示地图。 使用以下命令预览应用。

ng serve --open

Output:

输出：

Angular Google Maps Example Output Screen Angular Google Maps示例输出屏幕

Now it will show the development purpose only watermark on Google Maps. Why because, you need to enable to billing service to make it for production purposes. So, enable your billing using the below link, if you want to remove the watermark.

现在，它将在Google Maps上显示仅用于开发目的的水印。 原因为何，您需要启用计费服务才能将其用于生产目的。 因此，如果要删除水印，请使用以下链接启用结算功能。

可能的故障排除提示 (Possible Troubleshooting tip)

If you face the error message ‘Cannot find namespace ‘google’ while previewing, then you need to do two things.

如果在预览时遇到错误消息“找不到命名空间” ，则“ google” ，那么您需要做两件事。

Install Google Map plugin

安装Google Map插件

npm install @google/maps

2. Just import the google maps to app.component.ts file

2.只需将谷歌地图导入到app.component.ts文件

import { google } from '@google/maps';

概要 (Summary)

In this tutorial, You learned, how to integrate Google Maps Service in Angular Applications. Google Maps Integration is easy very easy for developers. And the end-user loves Google Maps look and feel. However, from a pricing perspective, small organization do not afford the cost.

在本教程中，您学习了如何在Angular应用程序中集成Google Maps Service。 Google Maps Integration对开发人员来说非常容易。 最终用户喜欢Google Maps的外观。 但是，从定价的角度来看，小型组织负担不起费用。

We have an alternative to Google Maps. That is Leaflet Maps. Soon, I try to write about, how to integrate Leaflet Maps in Angular Applications.

我们有Google地图的替代品。 那就是传单地图。 很快，我尝试撰写有关如何在Angular应用程序中集成Leaflet Maps的文章。

Stay tuned for more articles related to Angular.

请继续关注与Angular相关的更多文章。

Thank you for reading this article!

感谢您阅读本文！

Source code:

源代码：

进一步阅读 (Further Reading)

Angular Google Maps Website

Angular Google Maps网站

Angular Google Maps API Docs

Angular Google Maps API文档

Google Maps API Docs

Google Maps API文件

翻译自: https://medium.com/javascript-in-plain-english/integrate-google-maps-to-your-angular-application-step-by-step-guide-3604aadb76d1

谷歌地图集成