Map, Markers, Clustering markers, Events, Info Window(s)

Map

To init a map, we define a map variable likes:

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.036 };

// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 2,
    center: uluru,
});

Google countries latitude and longtitude coordinates
API Picker Guide

Marker

A marker identifies a location on a map, it can be customized, see here.

To make a maker, define it as the following:

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
    position: uluru,
    map: map, // this marker will be rendered on the map that we define
});

See more about references of marker.

Clustering markers

Use the MarkerClustererPlus library in combination with the Maps JavaScript API to combine markers of close proximity into clusters, and simplify the display of markers on the map.

A cluster as shown below, which has 3 markers.

Markers on a map

To display a large number of markers on a map, we can define Markers Clusters or iterate an array of markers.

Events

Programs interested in certain events will register JavaScript event listeners for those events and execute code when those events are received by calling addListener() to register event handlers on the object.

For a complete list of events, consult the Maps JavaScript API Reference.

Info Window(s)

A pop-up when clicking a marker.

Google Map click marker/infowindow by external link

Note:
Now I use an array of markers to show on the map.
I can not find a solution for the marker clusterer, when I click an external link, the marker selected can not be shown because the marker clusterer doesn't zoom in.

To click an infowindow, use Google Map Events on a HTML element event:

google.maps.event.trigger(markers[i], 'click');

Sources:

1. https://stackoverflow.com/questions/30439915/google-map-click-marker-by-external-link

2. https://stackoverflow.com/questions/32351008/open-infowindows-from-an-external-link-outside-of-the-google-map

To click marker, add/remove a marker by setting map reference

function showMarker(index) {
  hideAllMarkers();
  markers[index - 1].setMap(map);
}

function hideAllMarkers() {
  for(var i = 0; i < markers.length; i++) {
      markers[i].setMap(null); // if set null map reference in a marker, this marker will be removed.
  }
}

Srouces:

1. https://stackoverflow.com/questions/47607452/how-to-show-marker-on-google-map-when-clicked-on-list-item-from-hamburger-menu/47645752#47645752

2. (same) https://codepen.io/lzcjames/pen/eYzovwr

Get Lat and Lng from an address, a city or a country

1.Geocoding service in the Maps JavaScript API

• For dynamic geocoding (for example, within a user interface element, to respond in real time to user input)

• For a client-side application

2.Geocoding API web service

• For geocoding static (known in advance) addresses for placement of application content on a map

• For batch requests

• For a server-silde application

3.Geolocation API web service

• For mac address -> latitude, longitude

4.Places API web service

• For a server-side application, likes Java Client, Python Client, Go Client and Node.js Client

• For batch requests

5.Places Library in Maps JavaScript API

• Places API required

  API key restrictions are now being enforced for the Places Library, Maps JavaScript API, effective September 16, 2019. See here

• For a client-side application

ps.client side vs server side

1. How to access the return value of a Promise object

2. An async function always returns a promise. That's how it reports the completion of its asynchronous work. If you're using it in another async function, you can use await to wait for its promise to settle, but in a non-async function (often at the top level or in an event handler), you have to use the promise directly. See here

3. Look also about async, callback, promise, thread(Workers).

Before you start using the Maps JavaScript API, you need a project with a billing account and the Maps JavaScript API enabled. To learn more, see Get Started with Google Maps Platform.

On the Google Maps Platform, we need to:

1. Create a billing account
2. Create a project
3. Enable Maps JavaScript API
4. Get, add, and restrict Maps JavaScript API key

For the 4th step, the restricting API keys is also important, it authorizes which website can use this API key, I recommend you to set it.

Each user is credited with a monthly allowance of US$200. So 28,000 views per month with Maps JavaScript API cost Free.

var json = [
  {
    "country": "Vanuatu",
    "lat": 15.3767,
    "lng": 166.9592,
    "description": "Vanuatu is a South Pacific Ocean nation made up of roughly 80 islands that stretch 1,300 kilometers.",
    "languages": [
      {
        "name": "English",
        "link": "http://example.com/en"
      },
      {
        "name": "French",
        "link": "http://example.com/fr"
      }
    ]
  },
  {
    "country": "Fiji",
    "lat": -16.578193,
    "lng": 179.414413,
    "description": "A country in the South Pacific, is an archipelago of more than 300 islands.",
    "languages": [
      {
        "name": "English",
        "link": "http://example.com/en"
      }
    ]
  },
  {
    "country": "Panama",
    "lat": 8.537981,
    "lng": -80.782127,
    "description": "A country on the isthmus linking Central and South America.",
    "languages": [
      {
        "name": "Spanish",
        "link": "http://example.com/es"
      }
    ]
  }
]

for (i = 0; i < json.length; i++) {
    for (j = 0; j < json[i]["languages"].length; j++) {
        console.log(json[i]["country"]+" "+json[i]["languages"][j]["name"] );
    }
}

Json formatter
Working with JSON

JSON is a string whose format very much resembles JavaScript object literal format.
Src1 : https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON
Src2 : https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html

https://www.accessagriculture.org/global-use-0
http://jsfiddle.net/ospm0juf/

1. Click any country on the map, an info window which contains the associated languages and flag will pop up.
   在地图上点击任意标记，会弹出带有相关链接和国旗的小窗口。

2. Click any language in the country list, the markers of associated countries will be changed to blue pins on the map.
   在语言列表中点击任意语言，关联的国家在地图上会变为蓝色图钉。

3. Search any language in the search bar, click it, the markers of associated countries will be changed to blue pins on the map.
   在搜索框中输入任意语言，点击结果，关联的国家在地图上会变为蓝色图钉。