Google API 복습 ①지도 표시

이번에는 포트폴리오로서 비상시 피난처를 등록하는 애플리케이션을 만들고 아래 4가지 유형의 Google API를 사용했습니다.

-Google Maps Javascript API
-Geocoding API
-Elevation API
-Distance Matrix API

꽤 볼륨이 있으므로, 질내 사정으로하고, 기사로 하고 싶습니다. 처음 투고하므로 잘못 된 부분이 있으면 지적해 주시면 감사하겠습니다. ＊API를 사용하기 위한 준비에 대해서는, 유익한 기사가 복수 있었습니다. 아래에 참고 기사를 기재합니다.

그러면 본제에 들어갑니다.
제1부는, 지도의 표시에 대해입니다.
스크롤 1회로 끝납니다(웃음)

먼저 보기에 지도를 표시하려면 id를 map으로 하고 style 태그로 영역을 설정합니다.

  <div id="map" style="height: 400px; width: 600px;></div>

JavaScript에는 HTML 요소를 조작할 수 있는 DOM(Document Object Model)이라는 구조가 있으며, 아래의 설명으로 id, map의 영역에 예약을 넣어 앞서 설명한 옵션을 적용하여 지도를 표시할 수 있습니다. 옵션에 대해서는 취향에 맞게 커스터마이즈 할 수 있습니다. *zoom:해상도 center:중심지점 mapTypeId:지도 유형

  var getMap = (function() {                         
    var getMap = (function() {
      function codeAddress(address) {// 地図表示に関するオプション
      var mapOptions = {
        zoom: 16,
        center: { lat: 35.662, lng: 139.703 },
        mapTypeId: "roadmap"
      };// 地図を表示させるインスタンスを生成
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);
      console.log(map); …続く

      )};
    )};
  )};

마지막으로 console.log로 출력하는 것으로, 이와 같이 시부야 주변을 표시할 수 있었습니다.


[이하 참고 기사]
Rails5에서 GoogleMap을 볼 때까지
Google Maps Javascript API Reference
도트 설치 / Google Maps API 시작(무료)
Javascript 초보자용 / DOM이란?