[JavaScript] 구글맵 Google Map API

 

 

구글맵을 사용한다면 사용자가 원하는 디스플레이로 구글 지도를 변경하여 웹이나 앱에서 표시할 수 있다.

 

 

시작하기전에: Maps JavaScript API를 시작하기전에, 청구될 계좌가 연결된 프로젝트가 필요

 

 

 Google Map API 요약 설명

 

 

 

 

 

---

 

InfoWindow 

 

인포윈도우는 지도위에서 팝업 윈도우창으로 이미지나 텍스트를 보여줄 수 있다.

 

 

 

 

위 지도에 관한 코드는 아래참조▼

 

 

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });
  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
      shouldFocus: false,
    });
  });
}

 

 

사용자의 이름을 표시하기 위해 수정한 나의 코드▼

 

 

 

 

로티이미지위에 팝업창을 띄우기 위해 pixelOffset값은 (0, -31)

 

컨텐츠의 내용을 넣고 스타일을 주기 위해 infoWindow.setContent의 <div>로 조작한다.

 

 

(지도위에서 표시된 infoWindow)