Preparation before use

Has access to the external network and a Google account.

Go to the developer console

Google Developer Console

Create a project

The first time you need to create a project to use as a backstop. We create a project named Test, enter it, and then select the API and service modules.

Enable the appropriate API

Click the library module on the left, go to the API selection page, find the Google Maps JavaScript API, click and enable it.

Create a key

Click on the left key module to create an API key. The key is a necessary identifier to use the API and can be used in many places. The key generally has some quota, such as the number of accesses, the amount of traffic per access, and so on. The key can be customized to certain restrictions, such as the use of this key can only be under the domain name of such and such.

Begin to use

Each framework has its own set of ideas and rules for how to use it, and these are often analogous to other frameworks. So, we’ll use our previous experience as an analogy to learn the new framework and get a feel for the rules of the framework as we look at the official documentation and API structure. The JS Map API is documented in Chinese, and the content is detailed and easy to understand, so it will not be introduced here. However, there will be constant updates on some areas needing attention in the future.

Note that the following code in the key is my real key, only for the convenience of common learning use. After all, the first direct successful operation can not only maintain and improve the enthusiasm of exploration, but also save a large amount of unnecessary time. But because of the quota limit, we hope you treat gently.

Used in regular pages

<! DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> <div id="map"></div> <script> "use strict"; var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: { lat: 34, lng: 106}}); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSqv9FMHThX9DU_JK_pbwxzBQushtGfv4&callback=initMap" async defer></script> </body> </html>

Used in the front-end framework

Take Vue.js for example. The original Google-Maps package is used here and can be installed directly using NPM.

Many of Google’s services are not static libraries (compare that to JQ). Each time we send a different configuration to Google via the API, it returns what we need (code images, etc.). In other words, when we first use it, we’re going to send a request and when we receive the object, we’re going to use it to do something. This also means that we install a dependency package that contains not its source code, but code that helps us request its source code in the context of the framework.

import GoogleMapsLoader from 'google-maps'; export default { name: 'google-map', mounted() { GoogleMapsLoader.KEY = 'AIzaSyBSqv9FMHThX9DU_JK_pbwxzBQushtGfv4'; GoogleMapsLoader.load((google) => { let map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: { lat: 34, lng: 106 } }); }); }};