GooglemapAPI

Thu, Jun 11, 2020 3-minute read

google map api

The Google Maps Platform is a set of APIs and SDKs that allows developers to embed Google Maps into mobile apps and web pages, so today let’s have a try, get first step to learn about it.非常简单的 google map api 应用。

google map api

Get an API Key

create a new project

choose Maps JavaScript API

enable

Credentials

create credentials to get an API keys

need billing information to continue later servers 需要输入信用卡信息，因为正式是收费的。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Google Map</title>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>My Google Map</h1>
    <div id="map"></div>
    <script>
        function initMap() {
          // map options
          var options = {
            zoom: 8,
            center: { lat: 35.672855, lng: 139.817413 },
          };

      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCq0TTcf6Jo38pLwL4BraxXzRFGlKQ1JO4&callback=initMap">
    </script>
  </body>
</html>

key=AIzaSyCq0TTcf6Jo38pLwL4BraxXzRFGlKQ1JO4&callback=initMap

callback= initmap, means it need a function called initMap

 function initMap() {
        // map options
        var options = {
          zoom: 8,
          center: { lat: 35.672855, lng: 139.817413 },
        };

when we get to learn new APIs, their official website is the best place to explore.

google document

add marker

var marker = new google.maps.Marker({
  position: { lat: 35.302855, lng: 139.007413 },
  map: map,
});

// infowindow
var infowindow = new google.maps.InfoWindow({
  content: "<h1> Hello </h1>",
});

marker.addListener("click", function () {
  infowindow.open(map, marker);
});

if nothing shows, please open console page, mine shows google need my payment information //如果没有成功显示，打开游览器的 console 这边，会显示原因，我是因为没给信用卡信息。

let’s make more marker


 addMarker({
        coords: { lat: 36.302855, lng: 139.007413 },
         iconImage:
            "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
         content: "<h1> Hello </h1>",
         });

addMarker({ coords: { lat: 35.362855, lng: 139.013213 } });


function addMarker(props) {
          var marker = new google.maps.Marker({
            position: props.coords,
            map: map,
            // icon: props.iconImage,
          });

          // check for customicon,
          // below code means: check where it has cusomicon or not, if there is no icon image, set the icon: marker.setIcon(props.iconImage)

          if (props.iconImage) {
            // set icon image
            marker.setIcon(props.iconImage);
          }

          // check content
          if (props.content) {
            var infowindow = new google.maps.InfoWindow({
              content: props.content,
            });

            marker.addListener("click", function () {
              infowindow.open(map, marker);
            });
          }
        }
      }

make an array to warp all the markers, making the code more clear. 用 array 包裹住，干净点

var markers = [
  {
    coords: { lat: 36.302855, lng: 13007413 },
    iconImage:
      "https://developers.google.comaps/documentation/javascripexamples/full/images/beachflapng",
    content: "<h1> Hello </h1>",
  },
  {
    coords: { lat: 35.362855, lng: 13013213 },
  },
];

loop through all the markers in array


        //loop through markers
        for (var i = 0; i < markers.length; i++) {
          addMarker(markers[i]);
        }

    </script>

now make even more markers on the map by clicking on the map. 点点 map 就可以出现很多 markers

// we already create this map varable
var map = new google.maps.Map(document.getElementById("map"), options);

//add listener for click on map
google.maps.event.addListener(map, "click", function (event) {
  // add marker
  addMarker({ coords: event.latLng });
});